Detaillierte Erläuterung der Synchronisationsverarbeitung von $.ajax() und $.getJson() in jQuery

1. Vorwort

Warum ist eine Synchronisierung erforderlich? Denn manchmal, wenn wir eine Senden-Schaltfläche zum Senden von Formulardaten registrieren, wird vor der Übermittlungsaktion eine Reihe asynchroner Ajax-Anforderungsvorgänge ausgeführt, der Seiten-JS-Code wird jedoch in der Reihenfolge von oben nach unten ausgeführt . Wenn Sie während dieses Prozesses eine asynchrone Operation ausführen, können Sie das von der aktuellen asynchronen Operation zurückgegebene Ergebnis nicht abrufen und js führt die nächste Anweisung weiter aus. Daher müssen wir die Operationsanforderung synchronisieren, um den Hintergrund zu erhalten Geben Sie das Datenergebnis zurück und stellen Sie dann fest, ob das Ergebnis konsistent ist, bevor Sie die nächste Anweisung von js ausführen.

2. Erläuterung der $.ajax()-Parameter

URL: Die Adresse zum Senden der Anfrage.

Typ: Die Anforderungsmethode (Post oder Get) ist standardmäßig get.

timeout: erfordert einen Parameter vom Typ Number und legt den Anforderungstimeout (Millisekunden) fest.

async: Die Standardeinstellung ist wahr, alle Anfragen sind asynchrone Anfragen. Synchrone Anfrage, auf false gesetzt. 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. -----Dies ist der wichtigste Einstellungsfaktor für den Synchronisationsbetrieb

Cache: Der Standardwert ist „true“. Wenn der Browser über einen Cache verfügt, werden die zwischengespeicherten Daten des Browsers nicht abgerufen.

Daten: Erfordert Parameter vom Typ Objekt oder Zeichenfolge, an den Server gesendete Daten. Wenn es sich nicht um eine Zeichenfolge handelt, wird sie automatisch in ein Zeichenfolgenformat

konvertiert

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

Formel, zum Beispiel {foo1:"bar1",foo2:"bar2"} wird in &foo1=bar1&foo2=bar2 umgewandelt. Wenn es sich um ein Array handelt, unterscheidet sich JQuery automatisch

Werte entsprechen demselben Namen. Beispielsweise wird {foo:["bar1","bar2"]} in &foo=bar1&foo=bar2 konvertiert.

dataType: erfordert einen Parameter vom Typ String, dem Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, basiert JQuery das http-Paket automatisch auf mime

Die Informationen geben ResponseXML oder ResponseText zurück und werden als Callback-Funktionsparameter übergeben.

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 Nur-Text-JavaScript-Code zurück. Ergebnisse werden nicht automatisch zwischengespeichert. Es sei denn, Cache-Parameter sind 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: JSONP-Format. Beim Aufrufen einer Funktion mithilfe des SONP-Formulars, 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.

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

function(XMLHttpRequest){
This; //Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
}

vollständig: erfordert einen Parameter vom Typ Funktion, eine Rückruffunktion, die nach Abschluss der Anfrage aufgerufen wird (wird aufgerufen, wenn die Anfrage erfolgreich ist oder fehlschlägt). Parameter: XMLHttpRequest-Objekt und eine Zeichenfolge, die den erfolgreichen Anforderungstyp beschreibt.

function(XMLHttpRequest, textStatus){
This; //Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
}

Erfolg: 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){

//Daten können XMLDoc, JsonObj, HTML, Text usw. sein;

//Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird

Fehler: erfordert einen Parameter vom Typ „Funktion“, eine Funktion, die aufgerufen wird, wenn die Anforderung 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){
//Normalerweise enthält nur einer von textStatus und errorThrown Informationen
This; //Der Optionsparameter, der beim Aufruf dieser Ajax-Anfrage übergeben wird
}

contentType: erfordert einen Parameter vom Typ String. Beim Senden von Informationen an den Server ist der Inhaltskodierungstyp standardmäßig „application/x-www-form-urlencoded“. Dieser Standardwert ist für die meisten Anwendungen geeignet.

dataFilter: erfordert Parameter vom Typ „Funktion“, 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.

Funktion(Daten, Typ){
//Die verarbeiteten Daten zurückgeben
Rückgabedaten;
}

global: muss ein boolescher Parameter sein 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 oder ajaxStop können zur Steuerung verschiedener Ajax-Ereignisse verwendet werden.

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.

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.

Benutzername: muss ein Parameter vom Typ String sein, der zur Antwort auf den Benutzernamen der HTTP-Zugriffsauthentifizierungsanforderung verwendet wird.

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

processData: erfordert einen booleschen Typparameter und der Standardwert ist true. Standardmäßig werden die gesendeten Daten in ein Objekt (technisch gesehen nicht in eine Zeichenfolge) 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.

scriptCharset: muss ein Parameter vom Typ String sein. Er wird verwendet, um die Änderung des Zeichensatzes (Zeichensatzes) nur dann zu erzwingen, wenn der Datentyp während der Anfrage „jsonp“ oder „script“ ist , und der Typ ist GET. Wird normalerweise verwendet, wenn die lokalen und Remote-Inhaltskodierungen unterschiedlich sind.

3. $.getJson() Synchronisierungseinstellungen

$.getJson() selbst ist eine asynchrone Betriebsmethode und muss eingerichtet werden, bevor sie synchronisiert werden kann

Fügen Sie $.ajaxSettings.async = false (synchrone Ausführung) hinzu, nachdem Sie Ihren Code ausgeführt haben. Kehren Sie rechtzeitig zu $.ajaxSettings.async = true (asynchrone Ausführung) zurück muss asynchron ausgeführt werden.

4. Spezifische Betriebsbeispiele

1. $.ajax()

 //点击新增按钮,新增数据
      $("#btnAdd").click(function () {
        var bool = true;//存储异步请求结果是否通过
        //1、验证优惠额度正确性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //满减
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '满减优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '折扣优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '指定金额优惠额度格式不正确', 'error');
            return false;
          }
        }
        //2、验证优惠范围正确性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //选择全站
        }
        else if (index == 3) {  //判断商品ID
          $.ajax({
           type: "post",
            url: "Gift_Add.aspx",
           cache: false,
            async: false,  //设置同步了~~~~~~~~~
           dataType: "json",
            data: { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() },
            success: function (data) {
              if (data.result == "false") {
                $.messager.alert('错误提示', '商品ID不存在', 'error');
                bool = false;
               $("#isExistInfoTitle").css({ "display": "" });
              }
              else {
                $("#isExistInfoTitle").css({ "display": "none" });
                bool = true;
              }
            }
          });
        }
          });
        }
if (bool == false) {//如果bool为false才返回，true继续往下走
          return false;  //不能在异步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表单验证不通过
          return false;
        }
        //当上面全部验证通过了执行新增操作
        $.messager.confirm('温馨提示', '是否确认添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx&#63;method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

Nach dem Login kopieren

2. $.getJson()

 //点击新增按钮,新增数据
      $("#btnAdd").click(function () {
        var bool = true;//存储异步请求结果是否通过
        //1、验证优惠额度正确性
        var index = parseInt($("#intGiftMold").val());
        if (index == 1) {
          //满减
          var reg = /^[0-9]+,[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '满减优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 2) {
          var reg = /^0\.[0-9]+$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '折扣优惠额度格式不正确', 'error');
            return false;
          }
        }
        else if (index == 3) {
          var reg = /^[1-9]+[0-9]$/;
          if (!reg.test($("#strDiscounts").val())) {
            $.messager.alert('错误提示', '指定金额优惠额度格式不正确', 'error');
            return false;
          }
        }
        //2、验证优惠范围正确性
        var index = parseInt($("#intGiftRange").val());
        if (index == 1) { //选择全站
        }
        else if (index == 3) {  //判断商品ID
           $.ajaxSettings.async = false; //设置getJson同步
          $.getJSON("Gift_Add.aspx", { "method": "isExistInfoTitle", "intInfoID": $("#intInfoID").val() }, function (data) {
            if (data.result == "false") {
              $.messager.alert('错误提示', '商品ID不存在', 'error');
              bool = false;
              $("#isExistInfoTitle").css({ "display": "" });
            }
            else {
              $("#isExistInfoTitle").css({ "display": "none" });
              bool = true;
            }
          });
          $.ajaxSettings.async = true;//设置getJson异步
        }
          });
        }
        if (bool == false) {//如果bool为false才返回，true继续往下走
          return false;  //不能在异步方法里面return，不起作用
        }
        var validate = $("#form").form("validate");
        if (!validate) {//表单验证不通过
          return false;
        }
        //当上面全部验证通过了执行新增操作
        $.messager.confirm('温馨提示', '是否确认添加', function (r) {
          if (r) {
            $.post("Gift_Add.aspx&#63;method=addGift", $("#form").serialize(), function (data) {
              $.messager.alert('成功提示', '添加成功', 'info');
            });
          }
        });
      });

Nach dem Login kopieren

Zusammenfassung:

$.ajax ist die AJAX-Implementierung der traditionellen Get- und Post-Methoden
$.getJSON ist eine AJAX-Implementierung der JSONP-Klasse (Remote Data Reading)
Der Grund, warum es als AJAX-ähnlich bezeichnet wird, liegt darin, dass es zwar in der Ajax-Klasse von jq gekapselt ist, tatsächlich jedoch über den Skriptknoten

implementiert wird

Der Unterschied zwischen $.getJSON und $.ajax ist:

Beim Senden übergibt $.getJSON einen Callback-Funktionsnamen (jq gibt standardmäßig einen an)
Beim Empfang wird diese Rückruffunktion
aufgerufen Die Serverseite von $.getJSON muss den Namen der eingehenden Rückruffunktion vor den JSON-Daten anhängen
Aus diesem Grund ist die zurückgegebene Zeichenfolge nicht mehr JSON (das Format ist falsch)
Daher gelangt $.ajax mit dem Attribut dataType: „json“ aufgrund eines JSON-Analysefehlers in den Fehlerzweig

Detaillierte Erläuterung der Synchronisationsverarbeitung von $.ajax() und $.getJson() in jQuery_jquery