Maison >interface Web >js tutoriel >Résumé de l'utilisation de $.post et $.ajax dans Jquery

Résumé de l'utilisation de $.post et $.ajax dans Jquery

PHPz
PHPzoriginal
2016-05-16 16:01:571150parcourir

Utilisation de $.ajax de Jquery :

jQuery.ajax( options ) : charger des données distantes via des requêtes HTTP Il s'agit de l'implémentation AJAX sous-jacente de jQuery. . Pour des implémentations de haut niveau simples et faciles à utiliser, voir $.get, $.post, etc.

$.ajax() renvoie l'objet XMLHttpRequest qu'il a créé. Dans la plupart des cas, vous n'aurez pas besoin de manipuler cet objet directement, mais dans des cas particuliers, il peut être utilisé pour terminer manuellement la requête.

Remarque : Si vous spécifiez l'option dataType, veuillez vous assurer que le serveur renvoie les informations MIME correctes (par exemple, xml renvoie "text/xml"). Des types MIME incorrects peuvent provoquer des erreurs imprévisibles. Voir Spécification du type de données pour les requêtes AJAX.

Lorsque le type de données est défini sur « script », toutes les requêtes POST distantes (pas dans le même domaine) seront converties en GET.

$.ajax() n'a qu'un seul paramètre : le paramètre clé/valeur de l'objet, comprenant chaque information de configuration et de fonction de rappel. Voir les options de paramètres détaillées ci-dessous.

Dans jQuery 1.2, vous pouvez charger des données JSON sur plusieurs domaines. Lorsque vous l'utilisez, vous devez définir le type de données sur JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel. Lorsque le type de données est défini sur "jsonp", jQuery appellera automatiquement la fonction de rappel. (Je ne comprends pas très bien cela)

liste des paramètres jquery ajax :

url(String)

(Par défaut : adresse de la page actuelle) L'adresse à laquelle envoyer la demande.

type(String)
Méthode de requête (il y a deux paramètres : "POST" et "GET"), la valeur par défaut est "GET". Remarque : D'autres méthodes de requête HTTP telles que PUT et DELETE peuvent également être utilisées, mais ne sont prises en charge que par certains navigateurs.

timeout(Number)

Définissez le délai d'expiration de la demande (millisecondes). Ce paramètre remplace le paramètre global.

async(Boolean)

(Par défaut : true) Lorsqu'elles sont définies sur true, toutes les requêtes sont des requêtes asynchrones. Si vous devez envoyer des requêtes synchrones, définissez cette option sur false. Notez qu'une requête synchrone verrouillera le navigateur et que l'utilisateur devra attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations.

beforeSend(Function)

Fonctions qui peuvent modifier l'objet XMLHttpRequest avant d'envoyer la requête, comme l'ajout d'en-têtes HTTP personnalisés. L'objet XMLHttpRequest est le seul paramètre.

Le code est le suivant :
function(XMLHttpRequest){ this; // the options for this ajax request}
cache(Boolean)

S'il faut mettre en cache les résultats de la requête (par défaut : true) , le définir sur false ne chargera pas les informations de requête à partir du cache du navigateur. Notez qu'il est préférable de le définir sur false dans les premiers stades du développement, sinon il ne sera pas pratique de déboguer.

complete(Function)

Fonction de rappel une fois la demande terminée (appelée lorsque la demande réussit ou échoue). Paramètres : objet XMLHttpRequest, chaîne d'informations de réussite.

Le code est le suivant :
function(XMLHttpRequest,textStatus){
 this;//theoptionsforthisajaxrequest
}

contentType(String)

( Par défaut : " application/x-www-form-urlencoded") Type d'encodage du contenu lors de l'envoi d'informations au serveur. La valeur par défaut convient à la plupart des applications.

data(Object,String)

Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. Ajouté à l'URL dans les requêtes GET. Voir la description de l'option processData pour désactiver cette conversion automatique. Doit être au format Clé/Valeur. S'il s'agit d'un tableau, jQuery attribuera automatiquement le même nom à différentes valeurs. Par exemple, {foo:["bar1", "bar2"]} est converti en '&foo=bar1&foo=bar2'.

dataType(String)

Définissez le type de données renvoyé par le serveur. S'il n'est pas spécifié, jQuery renverra automatiquement ResponseXML ou ResponseText en fonction des informations MIME du paquet HTTP et les transmettra comme paramètre de fonction de rappel. Valeurs disponibles :
"xml" : renvoie les données au format XML, qui peuvent être traitées par jQuery.
"html" : renvoie les données au format HTML en texte brut ; peut contenir des éléments de script.
"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache.
"json" : renvoie les données JSON.
"jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.

error(Function)

(Par défaut : jugement automatique (xml ou html)) Cette méthode sera appelée lorsque la requête échoue. Cette méthode prend trois paramètres : l'objet XMLHttpRequest, le message d'erreur et (éventuellement) l'objet d'erreur capturé.

Le code est le suivant

function(XMLHttpRequest,textStatus,errorThrown){
 //通常情况下textStatus和errorThown只有其中一个有值
 this;//theoptionsforthisajaxrequest
}

global(Boolean)

是否触发全局 AJAX 事件(默认: true) 。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified(Boolean)

(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData(Boolean)

设置发送数据的信息格式(默认: true),设置为 true 的时候发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success(Function)

请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

代码如下:

function(data,textStatus){ 
 //datacouldbexmlDoc,jsonObj,html,text,etc... 
 this;//theoptionsforthisajaxrequest 
}

下面以一则示例解释一下该方法的具体的用法:

$.ajax({ 
  type:'get', 
  url:'http://www.www.daimajiayuan.com/rss', 
  beforeSend:function(XMLHttpRequest){ 
    //ShowLoading(); 
  }, 
  success:function(data,textStatus){ 
    $('.ajax.ajaxResult').html(''); 
    $('item',data).each(function(i,domEle){ 
      $('.ajax.ajaxResult').append(''+$(domEle).children('title').text()+''); 
    }); 
  }, 
  complete:function(XMLHttpRequest,textStatus){ 
    //HideLoading(); 
  }, 
  error:function(){ 
    //请求出错处理 
  } 
});

Jquery的$.post的用法:

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
jquery $.post 方法参数列表(说明):
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,可将此值放到url中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才能调用该方法)。
 
type (String) : (可选)客户端请求的数据类型(JSON,XML,等等)
 
这是一个简单的 POST 请求功能以取代复杂 $.ajax ,请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
下面是一个使用$.post的简单示例代码:

$.post( 
  'http://www.daimajiayuan.com/ajax.php', 
  {Action:"post",Name:"lulu"}, 
  function(data,textStatus){ 
    //data可以是xmlDoc,jsonObj,html,text,等等. 
    //this;//这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this 
    alert(data.result); 
  }, 
  "json"//这里设置了请求的返回格式为"json" 
);

如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意,上面的示例中 alert(data.result); 由于设置了Accept报头为"json",这里返回的data就是一个对象,因此不需要用eval()来转换为对象。

以上所述就是本文的全部内容了,希望大家能够喜欢。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn