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

Penggunaan bijak kaedah beforeSend Ajax dalam Jquery_jquery

WBOY
Lepaskan: 2016-05-16 15:18:57
asal
1417 orang telah melayarinya

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
  }
  // ......
});
Salin selepas log masuk

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);
  }
});
Salin selepas log masuk

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);
  }
});
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan