Analisis sebab dan penyelesaian mengapa kaedah jQuery pada tidak boleh mencetuskan Ajax

Dalam beberapa tahun kebelakangan ini, Javascript dan jQuery telah memainkan peranan yang semakin penting dalam kerja pembangunan bahagian hadapan, keupayaan jQuery bukan sahaja ditunjukkan dalam fungsi manipulasi DOM dan pemilih CSS yang sangat baik, tetapi jQuery juga menyediakan banyak fungsi global yang berkuasa fungsi pemprosesan acara sangat memudahkan aliran kerja pembangunan bahagian hadapan. Kaedah on() sudah pasti memberi kita banyak kemudahan, tetapi terdapat kes khas dalam penggunaan kaedah ini, iaitu, ia tidak boleh mencetuskan permintaan Ajax Punca dan penyelesaian masalah ini akan diperkenalkan secara terperinci di bawah .

Penggunaan kaedah on()

Mula-mula, mari kita fahami cara menggunakan kaedah on(). Kaedah on() boleh menerima berbilang parameter, yang paling penting ialah parameter pertama, yang digunakan untuk menentukan jenis peristiwa, iaitu, peristiwa yang perlu diikat oleh fungsi pengendalian acara.

Sebagai contoh, dalam contoh berikut, kami mengikat acara klik menggunakan kaedah on().

$("button").on("click", function(){
    alert("您点击了按钮");
});

Kod di atas akan muncul kotak gesaan selepas kami mengklik butang, di mana kaedah on() melepasi acara klik sebagai parameter pertama.

Sudah tentu, kaedah on() juga boleh mengikat berbilang peristiwa pada masa yang sama (dipisahkan dengan koma), dan menghantar fungsi pengendalian acara ke dalam parameter kedua. Contohnya:

$("button").on("mouseenter mouseleave", function(){
    alert("您进入/离开按钮区域");
});

Kod di atas akan mengendalikan peristiwa bergerak masuk dan keluar tetikus pada butang pada masa yang sama. Kaedah

on() mempunyai banyak parameter dan kegunaan lain, yang tidak akan diterangkan di sini Untuk pengenalan yang lebih terperinci, sila rujuk dokumentasi rasmi jQuery. Kaedah

on() tidak boleh mencetuskan permintaan Ajax? !

Berbalik kepada topik artikel ini, perkara yang akan kita bincangkan seterusnya ialah masalah kaedah on() tidak boleh mencetuskan permintaan Ajax. Mari kita lihat contoh berikut:

$("button").on("click", function(){
    $.ajax({
        url: "http://www.example.com/api",
        type: "GET",
        success: function(response){
            console.log(response);
        }
    });
});

Kod di atas cuba mendapatkan data daripada API melalui permintaan Ajax apabila butang diklik dan mencetak respons kepada konsol selepas permintaan itu berjaya. Walau bagaimanapun, apabila kami mengklik butang, kami mendapati tiada apa yang berlaku dan tiada output ke konsol.

Selepas beberapa penyelidikan dan ujian, kami sampai pada kesimpulan: kaedah on() tidak boleh mencetuskan permintaan Ajax!

Kaedah on() tidak boleh mengikat acara beban

Jadi, mengapa kaedah on() mempunyai masalah ini? Sebabnya ialah kaedah on() sebenarnya melaksanakan permintaan Ajax dengan mengikat peristiwa DOM, dan sebelum menghantar data respons kepada fungsi pemprosesan, ia mesti menyimpan data dalam nod DOM terlebih dahulu. Walau bagaimanapun, jQuery tidak boleh mencetuskan peristiwa beban dengan betul pada semua nod, yang menyebabkan kaedah on() gagal mencetuskan permintaan Ajax.

Kami boleh mengesahkannya dengan kod berikut:

$("img").on("load", function(){
    console.log("图片加载完毕");
});

Kod di atas akan mendengar acara penyiapan pemuatan imej dan mencetak mesej apabila acara dicetuskan. Walau bagaimanapun, apabila kami cuba memuatkan imej yang dijana secara dinamik (seperti <img src="http://www.example.com/1.png">), kami akan mendapati bahawa kod ini tidak berfungsi dan tiada maklumat dikeluarkan ke konsol.

Penyelesaian

Jadi, apakah kaedah yang harus kita gunakan apabila kaedah on() tidak boleh mencetuskan permintaan Ajax? Jawapannya ialah menggunakan fungsi global jQuery - $.ajax().

Kaedah $.ajax() ialah fungsi peringkat rendah yang boleh melaksanakan pelbagai jenis permintaan Ajax dengan menghantar parameter kepadanya. Contohnya:

$("button").on("click", function(){
    $.ajax({
        url: "http://www.example.com/api",
        type: "GET",
        success: function(response){
            console.log(response);
        }
    });
});

Kod di atas akan memanggil terus fungsi $.ajax() dan mendapatkan data API melalui kaedah GET. Selain itu, fungsi $.ajax() mempunyai banyak parameter dan kegunaan lain, yang tidak akan diterangkan di sini Untuk pengenalan yang lebih terperinci, sila rujuk dokumentasi rasmi jQuery.

Ringkasan

Di atas adalah pengenalan terperinci dan penyelesaian kepada masalah yang kaedah on() jQuery tidak boleh mencetuskan permintaan Ajax. Saya harap ia dapat membantu semua orang. Dalam pembangunan bahagian hadapan sebenar, kita harus memilih kaedah yang sesuai berdasarkan situasi sebenar, memberi perhatian kepada penggunaan dokumentasi dan enjin carian yang baik, dan terus meningkatkan kemahiran dan kebolehan kita.

Atas ialah kandungan terperinci Analisis sebab dan penyelesaian mengapa kaedah jQuery pada tidak boleh mencetuskan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!