Utilisation intelligente de la méthode beforeSend d'Ajax dans Jquery_jquery

jQuery est un framework js open source qui est souvent utilisé. Il existe une méthode beforeSend dans la requête $.ajax, qui est utilisée pour effectuer certaines actions avant d'envoyer la requête au serveur.

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

Empêcher les données en double
Dans le développement réel d'un projet, lors de la soumission d'un formulaire, souvent en raison du réseau ou d'autres raisons, l'utilisateur clique sur le bouton de soumission et pense à tort que l'opération n'a pas réussi, puis répète les temps d'opération du bouton de soumission si le code frontal. de la page n'effectue pas le traitement correspondant, cela conduit généralement à plusieurs Les mêmes données sont insérées dans la base de données, ce qui entraîne une augmentation des données sales. Pour éviter ce phénomène, désactivez le bouton de soumission dans la méthode beforeSend dans la requête $.ajax, attendez que la requête Ajax soit terminée, puis restaurez l'état disponible du bouton.

Par exemple :

// 提交表单数据到后台处理
$.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);
  }
});

Simuler l'effet Toast
Lorsque ajax demande au serveur de charger la liste de données, il invite au chargement ("Chargement, veuillez patienter..."),

$.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);
  }
});

La méthode beforeSend est utilisée pour ajouter certaines fonctions de traitement avant d'envoyer une requête au serveur. J'espère que cet article approfondira la compréhension de chacun sur la méthode beforeSend.