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 :

<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>

<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>

<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>

<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()等，在以后使用中，我会把它们也总结下来。