Parlez de l'utilisation de jQuery Ajax details_jquery

Définition et usage

La méthode ajax() charge les données distantes via des requêtes HTTP.

Cette méthode est 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 cette fonction directement, sauf si vous devez manipuler des options moins couramment utilisées pour plus de flexibilité.

Dans le cas le plus simple, $.ajax() peut être utilisé directement sans aucun paramètre.

Remarque : Toutes les options peuvent être définies globalement via la fonction $.ajaxSetup().

jQuery Ajax est très couramment utilisé dans le développement d'applications Web. Il comprend principalement des méthodes de fonctionnement courantes sans actualisation telles que ajax, get, post,load, getscript, etc.

Commençons par la méthode la plus simple. Lors du traitement de requêtes ajax complexes, jQuery utilise la méthode jQuery.ajax(). Il existe quelques méthodes simples dans jQuery, qui encapsulent la méthode jQuery.ajax(), de sorte que nous n'avons pas besoin d'utiliser la méthode jQuery.ajax() lors de la gestion de certains événements Ajax simples. Certaines de ces méthodes se trouvent dans des articles précédents. est déjà apparu, je pense que tout le monde pourra bientôt le maîtriser. Bien entendu, la méthode jQuery.ajax() sera expliquée très spécifiquement dans la seconde moitié de cet article, car elle constitue la priorité absolue de cet article.

Les 5 méthodes suivantes exécutent des formes courtes de requêtes Ajax générales. jQuery.ajax() doit être utilisé lors du traitement de requêtes Ajax complexes.

1.load(url,[data],[callback])

Chargez le code du fichier HTML distant et insérez-le dans le DOM La méthode GET est utilisée par défaut, et elle est automatiquement convertie en méthode POST lors du passage des paramètres.

◦url : l'adresse url distante à charger
◦data : données clé/valeur envoyées au serveur
◦callback : fonction de rappel lorsque le chargement est réussi

L'exemple de code est le suivant :

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

Le contenu du fichier chargé sera affiché ici Charger

2.jQuery.get(url, [données], [rappel])

Utilisez la méthode get pour obtenir des données du serveur.

◦ Adresse URL pour envoyer la demande
◦Données à envoyer au serveur
◦Fonction de rappel lorsque le chargement est réussi

L'exemple de code est le suivant :

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

Utilisez la méthode $.get() pour obtenir différents logos en passant l'identifiant. Il convient de mentionner que la requête est obtenue via la méthode get à ce stade, donc Request.QueryString doit être utilisé lors de l'obtention des valeurs des paramètres. Vous pouvez jeter un œil à la différence entre Request Request.QueryString

.

Logo BaiduLogo Google

logo3.jQuery.post(url, [data], [callback])
sera affiché ici Utilisez la méthode POST pour effectuer des requêtes asynchrones. Par rapport à jQuery.get(), la différence réside dans la méthode de requête, il n'y a donc pas d'explication particulière ici. La méthode d'utilisation est similaire à jQuery.get().

4.jQuery.getScript(url,[callback])

Demande de chargement et d'exécution d'un fichier JavaScript via la méthode GET. Cette technologie a été mentionnée dans l'article précédent, et c'est également un moyen simple d'utiliser jQuery.ajax. Vous pouvez voir ajax charger js, il n'y a donc pas d'explication particulière ici.

5.jQuery.getJSON(url,[data],[callback])

Obtenez des données au format json via la méthode get.

L'exemple de code est le suivant :

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

De même, il s'agit également d'une méthode abrégée pour la méthode jQuery.ajax(), similaire à la méthode suivante :

Liste des paramètres :

Nom du paramètre	Tapez	Description
url	Chaîne	(Par défaut : adresse de la page actuelle) L'adresse à laquelle envoyer la demande.
taper	Chaîne	(Par défaut : "GET") Méthode de requête ("POST" ou "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.
délai d'attente	Numéro	Définir le délai d'expiration de la demande (millisecondes). Ce paramètre remplace le paramètre global.
asynchrone	Booléen	(Par défaut : vrai) Par défaut, 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.
avantEnvoyer	Fonction	Les fonctions de l'objet XMLHttpRequest peuvent être modifiées avant d'envoyer la requête, comme l'ajout d'en-têtes HTTP personnalisés. L'objet XMLHttpRequest est le seul paramètre. <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span>
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span>
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, Chaîne	Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. Ajouté à l'URL dans les requêtes GET. Consultez 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'.
Type de données	Chaîne	Le type de données qui devrait être 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 un document XML pouvant être traité avec jQuery. "html" : renvoie des informations HTML en texte brut ; contient 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.
erreur	Fonction	(Par défaut : Déterminer automatiquement (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é. <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 <span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

 代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法， 在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

 代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功！"); 
   alert("修改成功！"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常！"); 
   alert("异常！"); 
  } 
});

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2?password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。