Teilen Sie die Schritte zur Implementierung der Ajax-Kapselung mit jQuery

Der Inhalt dieses Artikels besteht darin, die Schritte zur Verwendung von jQuery zur Implementierung der Ajax-Kapselung zu teilen. Es hat einen bestimmten Referenzwert.

Methode laden

• load(url,[data],[callback]). Daten sind die übermittelten Daten, Rückruf ist die Rückruffunktion, die Rückruffunktion kann drei Parameter übergeben, Antwortstatus xhr, der erste Parameter ist der vom Server zurückgegebene Inhalt, der zweite Parameter ist der Antwortstatus Erfolg oder Fehler, der dritte Parameter Es ist das XMLHttpRequest-Objekt

• $('#box').load(url) im zugrunde liegenden js. Der von der Zieladresse erhaltene Inhalt kann direkt geladen und irgendwo auf der aktuellen Seite eingefügt werden.

Globale Methode get()

• $.get(url,[data],[callback],type) type stellt den zurückgegebenen Inhalt dar Format: Wenn das Originalformat nicht festgelegt ist, kann die erzwungene Konvertierung fehlschlagen.

Globale Methode post()

• $.post(url, [Daten],[Rückruf]).

Globale Methode getJSON()

• $.getJSON()(url,[data],[callback]).

• Wird zum Laden von JSON-Dateien unter bestimmten Umständen verwendet

Globale Methode getSCRIPT()

• $ .getSCRIPT()(url,[Daten],[Rückruf]).

• wird zum Laden von JS-Dateien unter bestimmten Umständen verwendet. Im Allgemeinen nicht verwendet.

Globale Methode ajax()

• Nur ​​die Methode ajax() übergibt nur einen Parameter, bei dem es sich um ein Objekt handelt, das mehrere Schlüssel-Wert-Paare enthält .

• Am häufigsten verwendete Formate:

$.ajax({
  url:, //请求的地址
  type:, //请求的方式'GET'或'POST'
  data:{
        },  //提交的信息
  dataType: 'json',//设置返回内容的数据类型
  timeout:  ,//设置超时，请求超过了这个时间值就会结束请求
  global: ,//设置是否触发全局事件，true或false
  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数，xhr对象，错误信息，错误类型
       }
  success:function(response,stutas,xhr){//响应成功后执行的回调函数
     console.log(response);
      },
  beforeSend : function(){//请求开始之前触发该事件},
complete : function(){//请求结束之后触发该事件}
})

Formularserialisierung

• Allgemeine Datenübermittlungsmethode : Gehen Sie davon aus, dass es sich bei den übermittelten Daten um den Benutzernamen und die E-Mail-Adresse im Formular
  

• data:{ user:document.getElementById(‘user’), 
  emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行 
   }

• Formularserialisierung:
  Daten: $( 'form ').serialize(),// Nach der Serialisierung wird das Daten-Schlüssel-Wert-Paar in Form einer Zeichenfolge abgerufen und die URL codiert. Das Objekt der Funktion serialize() kann das gesamte Formular oder ein Formularelement sein, es kann jedoch nur ein jQuery-Objekt sein.

• param()-Methode
  $.param()-Methode ist der Kern der serialize()-Methode, die zum Serialisieren eines Arrays oder Objekts entsprechend Schlüssel/Wert verwendet wird.
  Für die erste Übermittlungsmethode zur direkten Übergabe eines Objekts können Sie diese Funktion verwenden, um das gesamte Objekt zu serialisieren.

data:$ .param({   
  user:document.getElementById('user'),
     emall:document.getElementById('emall')
    } )

• serializeArray()-Methode
  Die serializeArray-Methode serialisiert jedes Feld in einem Formular in ein Array im JSON-Format.

Ladeanforderung

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件，请求结束时会触发结束事件。

$(document).ajaxStart(function(){
     //请求开始时触发的行为
        }).ajaxStop(function(){
     //请求结束时触发的行为})

jQuery xhr-Objekt

jqXHR-Objekt ist das von der $.ajax()-Methode zurückgegebene Objekt. Es handelt sich um eine Obermenge von jsXHR-Objekten.

var jqXHR = $.ajax(      
      url:, //请求的地址            
      type:, //请求的方式'GET'或'POST'
      data:{
                      },  //提交的信息
             )；

Das jqXHR-Objekt bietet viele neue Eigenschaften und Methoden und unterstützt das Schreiben in verketteter Form. Dieselbe Rückruffunktion kann mehrmals ausgeführt werden, ohne dass sie überschrieben wird.

Das obige ist der detaillierte Inhalt vonTeilen Sie die Schritte zur Implementierung der Ajax-Kapselung mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!