Rumah  >  Artikel  >  hujung hadapan web  >  Pengenalan terperinci kepada acara dalam jQuery Ajax_jquery

Pengenalan terperinci kepada acara dalam jQuery Ajax_jquery

WBOY
WBOYasal
2016-05-16 16:03:461134semak imbas

Ajax mencetuskan banyak acara.
Terdapat dua jenis acara, satu acara tempatan dan satu lagi acara global:
Acara tempatan: dipanggil dan diperuntukkan melalui $.ajax.

Salin kod Kod adalah seperti berikut:

$.ajax({
beforeSend: function(){
// Kendalikan acara beforeSend
},
Lengkap: function(){
// Kendalikan acara lengkap
}
// ...
});

Peristiwa global boleh diikat menggunakan bind dan unbind boleh digunakan untuk unbind. Ini serupa dengan klik/turun tetikus/keyup dan acara lain. Tetapi ia boleh dihantar kepada setiap elemen DOM.
Salin kod Kod adalah seperti berikut:

$("#loading").bind("ajaxSend", function(){ //Gunakan bind
$(this).show();
}).ajaxComplete(function(){ //Gunakan ajaxComplete terus
$(this).hide();
});

Sudah tentu, jika anda tidak mahu acara global dijana untuk permintaan Ajax tertentu, anda boleh menetapkan global:false
Salin kod Kod adalah seperti berikut:

$.ajax({
URL: "test.html",
global: palsu,
// ...
});

Jujukan acara adalah seperti berikut:

acara global ajaxStart
Memulakan permintaan Ajax baharu dan tiada permintaan Ajax lain sedang dijalankan pada masa ini.
sebelumHantar acara tempatan
Dipecat apabila permintaan Ajax bermula. Anda boleh menetapkan objek XHR di sini jika perlu.
ajaxSend acara global
Peristiwa global dicetuskan sebelum permintaan bermula
kejayaan acara tempatan
Dicetuskan apabila permintaan berjaya. Iaitu, pelayan tidak mengembalikan ralat, dan data yang dikembalikan tidak mempunyai ralat.
acara global ajaxSuccess
Permintaan global berjaya
ralat acara setempat
Hanya dicetuskan apabila ralat berlaku. Anda tidak boleh melaksanakan kedua-dua fungsi panggil balik kejayaan dan ralat pada masa yang sama.
acara global ajaxError
Dicetuskan secara global apabila ralat berlaku
acara tempatan lengkap
Tidak kira sama ada permintaan anda berjaya atau gagal, walaupun ia adalah permintaan segerak, anda boleh mencetuskan acara ini apabila permintaan itu selesai.
ajaxLengkap acara global
Dicetuskan apabila permintaan global selesai
acara global ajaxStop
Membakar apabila tiada Ajax sedang berjalan.

Parameter panggilan balik acara setempat ditulis dengan jelas dalam dokumentasi, jadi saya tidak akan menerangkan butiran di sini.

Dalam acara global, kecuali ajaxStart dan ajaxStop, acara lain mempunyai 3 parameter
acara, XMLHttpRequest, ajaxOptions
Yang pertama ialah peristiwa, yang kedua ialah objek XHR, dan parameter ketiga adalah yang paling berguna, ia adalah parameter apabila memanggil ajax ini.
Untuk ajaxError, terdapat parameter keempat, thrownError, yang hanya akan diluluskan apabila pengecualian berlaku.
Kita boleh menggunakan ajaxOptions untuk menulis acara ajax global.
Contohnya

Salin kod Kod adalah seperti berikut:

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Meminta" o.url);
}).ajaxSuccess(fungsi(e,xhr,o) {
$(this).html(o.url "Permintaan berjaya");
}).ajaxError(fungsi(e,xhr,o) {
$(this).html(o.url "Permintaan gagal");
});

Untuk contoh ini,
Dengan cara ini, kami boleh memaparkan status ajax semasa dengan mudah di suatu tempat di seluruh dunia.
Sudah tentu, seperti yang dinyatakan sebelum ini, parameter ketiga sebenarnya adalah parameter yang dihantar kepada ajax. Kaedah seperti get/post/load/getScript/getJSON pada dasarnya memanggil kaedah ajax, jadi atribut ajaxOptions.url sentiasa sah.

Ada banyak lagi contoh.
Jika anda memanggil dengan ajax, anda juga boleh menghantar parameter tersuai. Dalam contoh berikut, saya menyesuaikan parameter mesej untuk panggilan ajax

Salin kod Kod adalah seperti berikut:

//Mesej parameter tersuai
$.ajax({url:"test1.html",type:"get",msg:"page one"});
$.ajax({url:"test2.html",type:"get",msg:"Halaman 2"});
$.ajax({url:"test3.html",type:"get",msg:"halaman tiga"});
$.ajax({url:"test4.html",type:"get",msg:"Halaman 4"});

//Di sini anda boleh mendapatkan msg parameter tersuai.
//Ini boleh digunakan untuk merawat permintaan ajax yang berbeza secara berbeza.
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Meminta" o.msg);
}).ajaxSuccess(fungsi(e,xhr,o) {
$(this).html(o.msg "Permintaan berjaya");
}).ajaxError(fungsi(e,xhr,o) {
$(this).html(o.msg "Permintaan gagal");
});

Akhir sekali, ada sesuatu untuk dikatakan tentang kaedah beban.

Kaedah ajax mudah lain, seperti get, post, getJSON, dsb., fungsi panggil balik semuanya ditetapkan dengan panggilan balik yang berjaya.

Dan hanya tetapan beban sebenarnya adalah panggilan balik yang lengkap.

Jadi, fungsi panggil balik yang ditetapkan dalam beban harus mempunyai 2 parameter.

XMLHttpRequest dan textStatus
Tetapi sebenarnya tidak begitu.
Panggilan balik beban mempunyai tiga parameter
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
Jadi, anda boleh
dalam panggilan balik beban Gunakan textStatus=="success" atau textStatus=="error" untuk menentukan sama ada panggilan itu berjaya.
Atau gunakan atribut XMLHttpRequest.status untuk menentukan sama ada ia adalah 200 atau 404 atau sesuatu yang lain.

Dalam hal ini, saya rasa ia lebih maju daripada kaedah get/post biasa. Adalah mustahil untuk menetapkan ralat setiap perolehan dalam nombor ganjil. Tetapi menetapkan ajaxError global sebenarnya adalah pilihan yang baik.

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