Rumah  >  Artikel  >  hujung hadapan web  >  Penggunaan bijak kaedah beforeSend Ajax dalam Jquery_jquery

Penggunaan bijak kaedah beforeSend Ajax dalam Jquery_jquery

WBOY
WBOYasal
2016-05-16 15:18:571367semak imbas

jQuery ialah rangka kerja js sumber terbuka yang sering digunakan Terdapat kaedah beforeSend dalam permintaan $.ajax, yang digunakan untuk melakukan beberapa tindakan sebelum menghantar permintaan ke pelayan.

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

Halang data pendua
Dalam pembangunan projek sebenar, apabila menghantar borang, selalunya disebabkan oleh rangkaian atau sebab lain, pengguna mengklik butang hantar dan tersilap berfikir bahawa operasi itu tidak berjaya, dan kemudian mengulangi masa operasi butang hantar Jika kod bahagian hadapan halaman tidak melakukan beberapa pemprosesan yang sepadan, ia biasanya membawa kepada berbilang Data yang sama dimasukkan ke dalam pangkalan data, mengakibatkan peningkatan dalam data kotor. Untuk mengelakkan fenomena ini, lumpuhkan butang hantar dalam kaedah beforeSend dalam permintaan $.ajax, tunggu sehingga permintaan Ajax selesai, dan kemudian pulihkan keadaan tersedia butang.

Contohnya:

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

Simulasikan kesan Roti Bakar
Apabila ajax meminta pelayan untuk memuatkan senarai data, ia menggesa pemuatan ("Memuatkan, sila tunggu..."),

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

Kaedah beforeSend digunakan untuk menambah beberapa fungsi pemprosesan sebelum menghantar permintaan ke pelayan Saya harap artikel ini akan mendalami pemahaman semua orang tentang kaedah beforeSend.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn