Jquery_jquery での Ajax の beforeSend メソッドの賢い使い方

jQuery は、よく使用されるオープンソースの JS フレームワークです。 $.ajax リクエストには beforeSend メソッドがあり、リクエストをサーバーに送信する前にいくつかのアクションを実行するために使用されます。

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

データの重複を防止
実際のプロジェクト開発では、フォームを送信するときに、ネットワークなどの理由でユーザーが送信ボタンをクリックし、操作が成功しなかったと誤って認識し、フロントエンド コードの場合は送信ボタンの操作を繰り返します。ページの一部は対応する処理を行わず、通常、同じデータがデータベースに複数挿入され、ダーティ データが増加します。この現象を回避するには、$.ajax リクエストの beforeSend メソッドで送信ボタンを無効にし、Ajax リクエストが完了するまで待ってから、ボタンが使用可能な状態に戻します。

例:

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

トースト効果をシミュレート
ajax がサーバーにデータリストのロードを要求すると、ロードするよう求められます (「ロード中です。お待​​ちください...」)。

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

beforeSend メソッドは、サーバーにリクエストを送信する前にいくつかの処理機能を追加するために使用されます。この記事が、beforeSend メソッドについての理解を深めてくれることを願っています。