So verwenden Sie die Parameter der $.Ajax()-Methode-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie die Parameter der $.Ajax()-Methode verwenden und welche Vorsichtsmaßnahmen bei der Verwendung der $.Ajax()-Methode gelten. Hier ist ein praktischer Fall: Werfen wir einen Blick darauf.

Lassen Sie mich zunächst das Konzept von Ajax vorstellen

AJAX ist „Asynchronous Javascript And XML“ (asynchrones JavaScript und XML), das bezieht sich auf Webentwicklungstechniken zum Erstellen interaktiver Webanwendungen.

AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein AJAX verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Ajax-Methode

Die $.ajax()-Methode ist die Ajax-Implementierung von jQuery auf der niedrigsten Ebene. Seine Struktur ist:

　$.ajax(options)

Diese Methode hat nur einen Parameter, aber dieses Objekt enthält die für die $.ajax()-Methode erforderlichen Anforderungseinstellungen und Rückruffunktionen und Parameter liegen in Form von Schlüssel/Wert vor und alle Parameter sind optional. Häufig verwendete Parameter sind in der folgenden Tabelle aufgeführt:

1.url

erfordert einen Parameter vom Typ String (Standard ist die aktuelle Adresse). ), um die angeforderte Seite zu versenden.

2.type

erfordert Parameter vom Typ String und die Anforderungsmethode (post oder get) ist standardmäßig get. Beachten Sie, dass auch andere http-Anfragemethoden wie Put und Delete verwendet werden können, aber nur von einigen Browsern unterstützt werden.

3.timeout

erfordert einen Parameter vom Typ Zahl und legt das Anforderungszeitlimit (Millisekunden) fest. Diese Einstellung überschreibt die globale Einstellung der Methode $.ajaxSetup().

4.async

erfordert boolesche Typparameter, die standardmäßig auf true gesetzt sind. Alle Anfragen sind asynchrone Anfragen. Wenn synchrone Anforderungen erforderlich sind, 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.

5.cache

erfordert einen booleschen Typparameter, der Standardwert ist true (wenn der Datentyp Script ist, ist der Standardwert false). Wenn Sie „false“ festlegen, werden die Anforderungsinformationen nicht aus dem Browser-Cache geladen.

6.data

erfordert Parameter vom Typ Objekt oder String, Daten werden an den Server gesendet. Wenn es sich nicht um eine Zeichenfolge handelt, wird sie automatisch in das Zeichenfolgenformat konvertiert. Die Get-Anfrage wird an die URL angehängt. Um diese automatische Konvertierung zu verhindern, aktivieren Sie die Option „processData“. Das Objekt muss im Schlüssel/Wert-Format vorliegen, zum Beispiel wird {foo1:"bar1",foo2:"bar2"} in &foo1=bar1&foo2=bar2 konvertiert. 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.

7.dataType

erfordert Parameter vom Typ String und der vom Server zurückgegebene Datentyp wird erwartet. Wenn nicht angegeben, gibt jQuery automatisch ResponseXML oder ResponseText basierend auf den Mine-Informationen des HTTP-Pakets zurück und übergibt sie als Callback-Funktionsparameter. Die verfügbaren Typen sind wie folgt:

XML: Gibt ein XML-Dokument zurück, das mit jQuery verarbeitet werden kann.

HTML: Gibt reine Text-HTML-Informationen zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in das DOM eingefügt wird.

Skript: Gibt Klartext-Javascript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert, es sei denn, der Cache-Parameter ist festgelegt. Beachten Sie, dass bei Remote-Anfragen (nicht unter derselben Domain) alle Post-Anfragen in Get-Anfragen umgewandelt werden.

json: Gibt JSON-Daten zurück.

jsonp: JSON-Format. Wenn Sie eine Funktion im JSONP-Format aufrufen, z. B. myurl?callback=?, ersetzt JQuery automatisch das letzte „?“ durch den richtigen Funktionsnamen, um die Rückruffunktion auszuführen.

Text: Gibt eine einfache Textzeichenfolge zurück.

8.beforeSend

erfordert Parameter vom Typ Funktion. Sie können die Funktion des XMLHttpRequest-Objekts ändern, bevor Sie die Anfrage senden, z. B. ein benutzerdefiniertes HTTP hinzufügen Kopfzeile. Wenn in beforeSend false zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden. Das XMLHttpRequest-Objekt ist der einzige Parameter.

function(XMLHttpRequest){
　　　　this;//调用本次ajax请求时传递的options参数
　　}

Nach dem Login kopieren

9.complete

erfordert einen Parameter vom Typ Funktion, eine Rückruffunktion, die aufgerufen wird, nachdem die Anfrage abgeschlossen ist (ob (die Anfrage ist erfolgreich oder schlägt fehl). Parameter: XMLHttpRequest-Objekt und eine Zeichenfolge, die den erfolgreichen Anforderungstyp beschreibt.

　　function(XMLHttpRequest,textStatus){
　　　　this; //调用本次ajax请求时传递的options参数
　　}

Nach dem Login kopieren

10.success

erfordert Parameter vom Typ Funktion. Die nach erfolgreicher Anfrage aufgerufene Rückruffunktion verfügt über zwei Parameter.

(1) Vom Server zurückgegebene und gemäß dem dataType-Parameter verarbeitete Daten.

(2) Eine Zeichenfolge, die den Status beschreibt.

　　function(data,textStatus){
　　　　//data可能是xmlDoc、jsonObj、html、text等
　　　　this; //调用本次ajax请求时传递的options参数
　　}

Nach dem Login kopieren

11.error

erfordert einen Parameter vom Typ Funktion, eine Funktion, die aufgerufen wird, wenn die Anfrage fehlschlägt. Diese Funktion verfügt über drei Parameter, nämlich das XMLHttpRequest-Objekt, die Fehlermeldung und das erfasste Fehlerobjekt (optional). Die Ajax-Ereignisfunktion lautet wie folgt:

　　function(XMLHttpRequest,textStatus,errorThrown){
　　　　//通常情况下textStatus和errorThrown只有其中一个包含信息
　　　　this; //调用本次ajax请求时传递的options参数
　　}

Nach dem Login kopieren

12.contentType

erfordert Parameter vom Typ String, wenn Informationen an den Server gesendet werden. Der Inhaltskodierungstyp ist standardmäßig „application/x-www-form-urlencoded“. Dieser Standardwert ist für die meisten Anwendungen geeignet.

13.dataFilter

erfordert Parameter vom Funktionstyp, einer Funktion, die die von Ajax zurückgegebenen Originaldaten vorverarbeitet. Geben Sie zwei Parameter an: Daten und Typ. Daten sind die von Ajax zurückgegebenen Originaldaten und Typ ist der dataTYpe-Parameter, der beim Aufruf von jQuery.ajax bereitgestellt wird. Der von der Funktion zurückgegebene Wert wird von jQuery weiterverarbeitet.

　　function(data,type){
　　　　//返回处理后的数据
　　　　return data;
　　}

Nach dem Login kopieren

14.global

erfordert einen booleschen Typparameter und der Standardwert ist true. Gibt an, ob das globale Ajax-Ereignis ausgelöst werden soll. Bei der Einstellung „false“ werden keine globalen Ajax-Ereignisse ausgelöst. AjaxStart und ajaxStop können zur Steuerung verschiedener Ajax-Ereignisse verwendet werden.

15.ifModified

erfordert einen booleschen Typparameter und der Standardwert ist false. Erhalten Sie neue Daten nur, wenn sich Serverdaten ändern. Die Grundlage für die Ermittlung von Serverdatenänderungen sind die Header-Informationen „Last-Modified“. Der Standardwert ist false, was bedeutet, dass Header-Informationen ignoriert werden.

16.jsonp

erfordert Parameter vom Typ String und schreibt den Namen der Rückruffunktion in einer JSONP-Anfrage neu. Dieser Wert wird verwendet, um den „Callback“-Teil des URL-Parameters in einer GET- oder POST-Anfrage zu ersetzen, z. B. „callback=?“ führt dazu, dass „onJsonPLoad=?“ übergeben wird Der Server.

17.username

muss ein Parameter vom Typ String sein, der verwendet wird, um dem Benutzer auf die HTTP-Zugriffsauthentifizierungsanforderung zu antworten.

18.password

erfordert einen Parameter vom Typ String, bei dem es sich um das Passwort handelt, das zur Beantwortung der HTTP-Zugriffsauthentifizierungsanforderung verwendet wird.

19.processData

erfordert einen booleschen Typparameter und der Standardwert ist true. Standardmäßig werden die gesendeten Daten in Objekte (technisch gesehen keine Zeichenfolgen) konvertiert, um dem Standardinhaltstyp „application/x-www-form-urlencoded“ zu entsprechen. Wenn Sie DOM-Bauminformationen oder andere Informationen senden möchten, die Sie nicht konvertieren möchten, legen Sie den Wert auf „false“ fest.

20.scriptCharset

erfordert Parameter vom Typ String, nur wenn der Datentyp bei Anforderung „jsonp“ oder „script“ ist, und Typ Es wird verwendet, um die Änderung des Zeichensatzes (Charset) nur dann zu erzwingen, wenn es sich um GET handelt. Wird normalerweise verwendet, wenn die lokalen und Remote-Inhaltskodierungen unterschiedlich sind.

Fallcode:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

Nach dem Login kopieren

Wissenslink:

1. $.each() Funktion: $. Die Funktion „each()“ unterscheidet sich von der Methode „each()“ des jQuery-Objekts. Sie ist eine globale Funktion und bedient das jQuery-Objekt nicht. Diese Funktion empfängt zwei Parameter, der erste Parameter ist ein Array oder Objekt und der zweite Parameter ist eine Rückruffunktion. Die Rückruffunktion verfügt über zwei Parameter: Der erste Parameter ist der Index des Arrays oder des Mitglieds des Objekts und der zweite Parameter ist die entsprechende Variable oder der entsprechende Inhalt.

　　$.each(data,function(commentIndex,comment){
  //doSomething;
 })

Nach dem Login kopieren

2、ajaxStart()与ajaxStop()：当Ajax请求开始时，会触发ajaxStart()方法的回调函数。当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

有时候页面需要加载一些图片，可能速度回比较慢，如果在加载过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信息。

此时，我们就需要为网页添加一个提示信息，常用的提示信息是“加载中...”，代码如下：

<p id="loading">加载中...</p>

Nach dem Login kopieren

当Ajax请求开始时，将此元素显示，用来提示用户Ajax请求正在进行；当Ajax请求结束后，将此元素隐藏。代码如下：

$("#loading").ajaxStart(function(){
　　　　$(this).show();
　　}).ajaxStop(function(){
 $(this).hide();
 })

Nach dem Login kopieren

好了，下面再给大家分享一个案例代码：

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

Nach dem Login kopieren

end，代码到此结束。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！