Clevere Verwendung der beforeSend-Methode von Ajax in Jquery_jquery

jQuery ist ein häufig verwendetes Open-Source-JS-Framework. In der $.ajax-Anfrage gibt es eine beforeSend-Methode, mit der einige Aktionen ausgeführt werden, bevor die Anfrage an den Server gesendet wird.

$.ajax({
  beforeSend: function(){
   // Handle the beforeSend event
  },
  complete: function(){
   // Handle the complete event
  }
  // ......
});

Duplikate von Daten verhindern
In der tatsächlichen Projektentwicklung klickt der Benutzer beim Senden eines Formulars häufig aufgrund des Netzwerks oder aus anderen Gründen auf die Schaltfläche „Senden“ und denkt fälschlicherweise, dass der Vorgang nicht erfolgreich ist, und wiederholt dann die Betätigung der Schaltfläche „Senden“ mehrmals Wenn die Seite keine entsprechende Verarbeitung durchführt, führt dies normalerweise dazu, dass mehrere dieselben Daten in die Datenbank eingefügt werden, was zu einer Zunahme schmutziger Daten führt. Um dieses Phänomen zu vermeiden, deaktivieren Sie die Schaltfläche „Senden“ in der Methode „beforeSend“ in der $.ajax-Anfrage, warten Sie, bis die Ajax-Anfrage abgeschlossen ist, und stellen Sie dann den verfügbaren Status der Schaltfläche wieder her.

Zum Beispiel:

// 提交表单数据到后台处理
$.ajax({
  type: "post",
  data: studentInfo,
  contentType: "application/json",
  url: "/Home/Submit",
  beforeSend: function () {
    // 禁用按钮防止重复提交
    $("#submit").attr({ disabled: "disabled" });
  },
  success: function (data) {
    if (data == "Success") {
      //清空输入框
      clearBox();
    }
  },
  complete: function () {
    $("#submit").removeAttr("disabled");
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

Toast-Effekt simulieren
Wenn Ajax den Server auffordert, die Datenliste zu laden, fordert es zum Laden auf („Laden, bitte warten ...“),

$.ajax({
  type: "post",
  contentType: "application/json",
  url: "/Home/GetList",
  beforeSend: function () {
    $("loading").show();
  },
  success: function (data) {
    if (data == "Success") {
      // ...
    }
  },
  complete: function () {
    $("loading").hide();
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

Die Methode beforeSend wird verwendet, um einige Verarbeitungsfunktionen hinzuzufügen, bevor eine Anfrage an den Server gesendet wird. Ich hoffe, dass dieser Artikel das Verständnis aller über die Methode beforeSend vertieft.