Sprechen Sie über die Verwendungsdetails von jQuery Ajax

Definition und Verwendung

Die Methode ajax() lädt Remote-Daten über HTTP-Anfragen.

Diese Methode ist die zugrunde liegende AJAX-Implementierung von jQuery. Einfache und benutzerfreundliche High-Level-Implementierungen finden Sie unter $.get, $.post usw. $.ajax() gibt das von ihm erstellte XMLHttpRequest-Objekt zurück. In den meisten Fällen müssen Sie diese Funktion nicht direkt manipulieren, es sei denn, Sie müssen weniger häufig verwendete Optionen für mehr Flexibilität manipulieren.

Im einfachsten Fall kann $.ajax() direkt ohne Parameter verwendet werden.

Hinweis: Alle Optionen können global über die Funktion $.ajaxSetup() festgelegt werden.

jQuery Ajax wird sehr häufig in der Webanwendungsentwicklung verwendet. Es umfasst hauptsächlich gängige aktualisierungsfreie Betriebsmethoden wie Ajax, Get, Post, Load, Getscript usw. Lassen Sie mich es Ihnen vorstellen.

Beginnen wir mit der einfachsten Methode. Bei der Verarbeitung komplexer Ajax-Anfragen verwendet jQuery die Methode jQuery.ajax(). Es gibt einige einfache Methoden in jQuery, die die Methode jQuery.ajax() kapseln, sodass wir bei der Verarbeitung einiger einfacher Ajax-Ereignisse nicht die Methode jQuery.ajax() verwenden müssen ist bereits erschienen, ich glaube, jeder wird es bald meistern können. Natürlich wird die Methode jQuery.ajax() in der zweiten Hälfte dieses Artikels sehr detailliert erläutert, da sie die oberste Priorität dieses Artikels darstellt.

Die folgenden 5 Methoden führen kurze Formen allgemeiner Ajax-Anfragen aus. jQuery.ajax() sollte bei der Verarbeitung komplexer Ajax-Anfragen verwendet werden.

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

Laden Sie den Remote-HTML-Dateicode und fügen Sie ihn in das DOM ein. Standardmäßig wird die GET-Methode verwendet und beim Übergeben von Parametern automatisch in die POST-Methode konvertiert.

◦url: die zu ladende Remote-URL-Adresse
◦Daten: Schlüssel-/Wertdaten, die an den Server gesendet werden
◦Rückruf: Rückruffunktion bei erfolgreichem Laden

Der Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

Der Inhalt der geladenen Datei wird hier angezeigt. Laden

2.jQuery.get(url, [data], [callback])

Verwenden Sie die get-Methode, um Daten vom Server abzurufen.

◦ URL-Adresse zum Senden der Anfrage
◦Daten, die an den Server
gesendet werden sollen ◦Rückruffunktion bei erfolgreichem Laden

Der Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

Verwenden Sie die Methode $.get(), um durch Übergabe der ID verschiedene Logos zu erhalten. Es ist erwähnenswert, dass die Anforderung zu diesem Zeitpunkt über die get-Methode abgerufen wird. Daher muss beim Abrufen von Parameterwerten Request.QueryString verwendet werden. Sie können sich den Unterschied zwischen Request Request.QueryString

ansehen

Baidu-Logo Google-Logo

logo3.jQuery.post(url, [data], [callback])
wird hier angezeigt Verwenden Sie die POST-Methode, um asynchrone Anforderungen zu stellen. Im Vergleich zu jQuery.get() liegt der Unterschied in der Anforderungsmethode, daher gibt es hier keine besondere Erklärung. Die Verwendungsmethode ähnelt jQuery.get().

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

Anfrage zum Laden und Ausführen einer JavaScript-Datei über die GET-Methode. Diese Technologie wurde im vorherigen Artikel erwähnt und ist auch eine einfache Möglichkeit, jQuery.ajax zu verwenden. Sie können sehen, wie Ajax js lädt, daher gibt es hier keine besondere Erklärung.

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

Rufen Sie Daten im JSON-Format über die get-Methode ab.

Der Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

In ähnlicher Weise ist dies auch eine Abkürzungsmethode für die jQuery.ajax()-Methode, ähnlich der folgenden Methode:

Parameterliste:

Parametername	Typ	Beschreibung
URL	Zeichenfolge	(Standard: aktuelle Seitenadresse) Die Adresse zum Senden der Anfrage.
Typ	Zeichenfolge	(Standard: „GET“) Anforderungsmethode („POST“ oder „GET“), Standard ist „GET“. Hinweis: Andere HTTP-Anfragemethoden wie PUT und DELETE können ebenfalls verwendet werden, werden jedoch nur von einigen Browsern unterstützt.
Zeitüberschreitung	Nummer	Anfrage-Timeout festlegen (Millisekunden). Diese Einstellung überschreibt die globale Einstellung.
asynchron	Boolescher Wert	(Standard: true) Standardmäßig sind alle Anfragen asynchrone Anfragen. Wenn Sie synchrone Anfragen senden müssen, legen Sie diese Option auf „false“ fest. Beachten Sie, dass eine synchrone Anfrage den Browser sperrt und der Benutzer warten muss, bis die Anfrage abgeschlossen ist, bevor andere Vorgänge ausgeführt werden können.
beforeSend	Funktion	Die Funktionen des XMLHttpRequest-Objekts können vor dem Senden der Anfrage geändert werden, beispielsweise durch das Hinzufügen benutzerdefinierter HTTP-Header. Das XMLHttpRequest-Objekt ist der einzige Parameter. <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> Nach dem Login kopieren
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> Nach dem Login kopieren
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, Zeichenfolge	An den Server gesendete Daten. Wird automatisch in das Anforderungszeichenfolgenformat konvertiert. Wird in GET-Anfragen an die URL angehängt. Informationen zum Deaktivieren dieser automatischen Konvertierung finden Sie in der Beschreibung der ProcessData-Option. Muss im Schlüssel/Wert-Format vorliegen. Wenn es sich um ein Array handelt, weist jQuery verschiedenen Werten automatisch denselben Namen zu. Beispielsweise wird {foo:["bar1", "bar2"]} in '&foo=bar1&foo=bar2' konvertiert.
dataType	Zeichenfolge	Der Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, gibt jQuery automatisch ResponseXML oder ResponseText basierend auf den MIME-Informationen des HTTP-Pakets zurück und übergibt sie als Callback-Funktionsparameter. Verfügbare Werte: "xml": Gibt ein XML-Dokument zurück, das mit jQuery verarbeitet werden kann. „html“: Gibt reine Text-HTML-Informationen zurück; enthält Skriptelemente. "script": Gibt Nur-Text-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. "json": Gibt JSON-Daten zurück. "jsonp": JSONP-Format. Beim Aufrufen einer Funktion im JSONP-Format, z. B. „myurl?callback=?“, ersetzt jQuery automatisch ? durch den richtigen Funktionsnamen, um die Callback-Funktion auszuführen.
Fehler	Funktion	(Standard: Automatisch ermitteln (XML oder HTML)) Diese Methode wird aufgerufen, wenn die Anfrage fehlschlägt. Diese Methode benötigt drei Parameter: das XMLHttpRequest-Objekt, die Fehlermeldung und (möglicherweise) das erfasste Fehlerobjekt. <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> Nach dem Login kopieren
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> Nach dem Login kopieren

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

代码如下

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

Nach dem Login kopieren

可能你还没有使用过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() {
  //请求出错处理
 }
});

Nach dem Login kopieren

使用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("异常！"); 
  } 
});

Nach dem Login kopieren

//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&#63;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); 
 }
});

Nach dem Login kopieren

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

Sprechen Sie über die Verwendungsdetails von jQuery Ajax_jquery