Pengenalan Kaedah Ajax JQuery ' s

mata teras

Singkatan JQuery Kaedah AJAX menyediakan kaedah yang memudahkan panggilan AJAX, yang membungkus kaedah
• untuk tujuan tertentu menggunakan konfigurasi pratetap. Kaedah yang dibincangkan dalam artikel ini termasuk $.ajax(), load() dan $.post(). $.get() Kaedah
• membolehkan data dimuatkan dari pelayan dan dimasukkan ke dalam elemen yang dipilih. Ia menggunakan URL, data pilihan, dan fungsi panggilan balik pilihan. Kaedah ini boleh digunakan untuk memuatkan kandungan utama laman web secara asynchronously. load() Kaedah
• digunakan untuk menghantar permintaan pos ke pelayan dan menghantar data sebagai sebahagian daripada badan permintaan. Kaedah ini sesuai untuk permintaan yang boleh menyebabkan perubahan dalam keadaan sisi pelayan. $.post() Kaedah
• memulakan permintaan GET ke pelayan, yang sesuai untuk situasi di mana pelayan sentiasa mengembalikan hasil yang sama untuk set parameter yang diberikan, atau di mana pengguna perlu berkongsi sumber. $.get()

Adakah anda tidak pernah mendengar istilah Ajax? Saya yakin hampir semua orang diletakkan, dekat dengan badan mereka. Ajax (pada asalnya bermaksud JavaScript dan XML yang tidak segerak) adalah salah satu kaedah klien yang paling biasa digunakan yang membantu membuat laman web dan aplikasi web yang tidak segerak.

Sudah tentu, anda boleh menggunakan javascript mentah untuk melaksanakan panggilan Ajax, tetapi ia boleh menyusahkan untuk mengendalikan semua bahagian yang berlainan kod. Ini benar terutamanya jika anda perlu menyokong pelayar lama seperti Internet Explorer 6.

bernasib baik, JQuery memberikan kita satu set cara untuk menangani masalah ini, yang membolehkan kita memberi tumpuan kepada tugas -tugas yang ingin kita capai dengan kod kita. JQuery menyediakan kaedah utama

yang boleh dikonfigurasikan dengan sangat sesuai dengan keperluan anda. Ia juga menyediakan satu set kaedah singkatan yang dipanggil kaedah singkatan, kerana ia hanya pembalut $.ajax() kaedah dengan konfigurasi pratetap, masing -masing melayani satu tujuan. $.ajax()

Selain daripada kaedah

, semua kaedah mempunyai satu perkara yang sama: mereka tidak beroperasi pada satu set elemen DOM, tetapi dipanggil terus dari objek jQuery. Oleh itu, kami tidak akan menulis kenyataan seperti ini: $.ajax()

<code class="language-javascript">$('p').ajax(...);</code>

ini akan memilih semua perenggan di halaman, kemudian hubungi kaedah

, dan sebaliknya tulis: ajax()

<code class="language-javascript">$.ajax(...);</code>

Dalam artikel ini, kita akan membincangkan tiga kaedah singkatan jQuery yang paling biasa digunakan:

, load() dan $.post(). $.get()

LOAD ()

Kaedah pertama yang akan kita bincangkan ialah

. Ia membolehkan kami memuatkan data dari pelayan dan meletakkan data yang dikembalikan (biasanya kod HTML) ke dalam elemen yang memilih pemadanan. Sebelum menggunakannya, mari kita lihat tandatangannya: load()

<code class="language-javascript">load(url[, data][, callback])</code>

Makna setiap parameter adalah seperti berikut:

• url: rentetan yang menyatakan URL sumber yang anda mahu hantar permintaan;
• : rentetan pilihan yang harus menjadi rentetan pertanyaan yang dibentuk dengan baik, atau objek yang mesti diluluskan sebagai parameter permintaan. Sekiranya rentetan diluluskan, kaedah permintaan akan diperoleh, dan jika objek diluluskan, kaedah permintaan akan diposkan. Jika parameter ini ditinggalkan, kaedah GET digunakan; data
: Fungsi panggil balik pilihan yang dipanggil selepas permintaan AJAX selesai. Fungsi ini menerima sehingga tiga parameter: teks tindak balas, rentetan status yang diminta, dan contoh JQXHR. Di dalam fungsi panggil balik, konteks (ini) ditetapkan satu demi satu ke setiap elemen koleksi.
• callback
Adakah ini kelihatan sukar digunakan? Mari kita lihat contoh khusus.

Katakan anda mempunyai elemen di laman web anda dengan id utama, yang mewakili kandungan utama. Apa yang kita mahu lakukan adalah secara asynchronously memuat kandungan utama halaman yang dirujuk dalam pautan dalam menu utama, idealnya ID adalah menu utama. Kami hanya mahu mengambil kandungan di dalam elemen ini, kerana susun atur yang lain tidak akan berubah, jadi mereka tidak perlu dimuatkan.

Pendekatan ini dimaksudkan sebagai peningkatan kerana jika pengguna yang melawat laman web telah melumpuhkan JavaScript, mereka masih dapat melayari laman web menggunakan mekanisme penyegerakan biasa. Kami mahu melaksanakan ciri ini kerana ia dapat meningkatkan prestasi laman web. Dalam contoh ini, kami mengandaikan bahawa semua pautan dalam menu adalah pautan dalaman.

Menggunakan kaedah jQuery dan

, kita dapat menyelesaikan tugas ini dengan kod berikut:

load()

tunggu! Bolehkah anda melihat apa yang salah dengan kod ini? Sesetengah daripada anda mungkin mendapati bahawa kod ini mengambil semula kod HTML dari halaman yang dirujuk, bukan hanya kandungan utama. Melaksanakan kod ini akan menghasilkan sesuatu seperti mempunyai dua cermin, satu di hadapan yang lain: anda melihat cermin di dalam cermin, di dalam cermin, dan sebagainya. Apa yang kita mahukan adalah hanya memuatkan kandungan utama halaman sasaran.

<code class="language-javascript">$('p').ajax(...);</code>

Untuk menyelesaikan masalah ini, jQuery membolehkan kami menambah pemilih dengan segera selepas URL yang ditentukan. Menggunakan fungsi ini dari kaedah , kita boleh menulis semula kod sebelumnya kepada: Kali ini kita mencari halaman, kemudian menapis kod HTML, menyuntik hanya keturunan elemen dengan id utama. Kami termasuk pemilih sejagat (

) kerana kami ingin mengelakkan unsur -unsur #main di dalam elemen #main;

load() Contoh ini baik, tetapi ia hanya menunjukkan penggunaan salah satu parameter yang ada. Mari lihat lebih banyak kod!

<code class="language-javascript">$.ajax(...);</code>

Gunakan fungsi panggil balik dengan beban ()

* Parameter panggil balik boleh digunakan untuk memberitahu pengguna penyempurnaan operasi. Mari kita kemas kini contoh sebelumnya untuk kali terakhir untuk menggunakannya.

Kali ini kita menganggap kita mempunyai elemen dengan pemberitahuan ID-bar dan ia akan digunakan sebagai ... baik, pemberitahuan bar.

Apabila kita menguasai

, mari kita berikan perhatian kita kepada kaedah seterusnya.

$. Post ()

<code class="language-javascript">load(url[, data][, callback])</code>

Kadang -kadang kita mahu menyuntik kandungan yang dikembalikan oleh pelayan ke dalam satu atau lebih elemen. Kami mungkin mahu mengambil data dan kemudian memutuskan apa yang perlu dilakukan dengannya selepas mencari data. Untuk melakukan ini, kita boleh menggunakan kaedah $.post() atau $.get().

Mereka berfungsi sama (membuat permintaan ke pelayan) dan sama dari segi tandatangan dan parameter yang diterima. Satu -satunya perbezaan ialah seseorang menghantar permintaan pos dan yang lain menghantar permintaan GET. Jelas, bukan?

Jika anda tidak ingat perbezaan antara permintaan pos dan permintaan GET, jika permintaan kami boleh menyebabkan keadaan sisi pelayan berubah, menghasilkan respons yang berbeza, anda harus menggunakan pos. Jika tidak, ia harus menjadi permintaan GET.

$.post() Tandatangan kaedah ialah:

<code class="language-javascript">$('p').ajax(...);</code>

Parameter adalah seperti berikut:

• url: rentetan yang menyatakan URL sumber yang anda mahu hantar permintaan;
• : rentetan pilihan atau objek yang jQuery akan dihantar sebagai sebahagian daripada permintaan pos; data
: Fungsi panggil balik yang dilaksanakan selepas permintaan berjaya. Di dalam fungsi panggil balik, konteks (ini) ditetapkan untuk mewakili objek yang mewakili tetapan AJAX yang digunakan dalam panggilan.
• callback
: Rentetan pilihan yang menentukan bagaimana badan tindak balas ditafsirkan. Nilai yang diterima ialah: HTML, Teks, XML, JSON, Skrip, dan JSONP. Ini juga boleh menjadi rentetan pelbagai nilai yang dipisahkan ruang. Dalam kes ini, jQuery menukarkan satu jenis ke yang lain. Sebagai contoh, jika respons adalah teks dan kami ingin merawatnya sebagai XML, kami boleh menulis "Teks XML". Jika parameter ini ditinggalkan, teks tindak balas akan diserahkan kepada fungsi panggil balik tanpa sebarang pemprosesan atau penilaian, dan jQuery akan berusaha sebaik mungkin untuk meneka format yang betul.
• type
Sekarang anda tahu apa yang boleh dilakukan

dan parameternya, mari kita tulis kod.

$.post() Katakan kita mempunyai borang untuk mengisi. Setiap kali bidang kehilangan fokus, kami ingin menghantar data medan ke pelayan untuk mengesahkan kesahihannya. Kami akan mengandaikan bahawa pelayan mengembalikan maklumat dalam format JSON. Kes penggunaan biasa adalah untuk mengesahkan bahawa pengguna yang dipilih nama pengguna belum diduduki.

Untuk melaksanakan fungsi ini, kita boleh menggunakan kaedah JQuery's

seperti berikut:

$.post()

Dalam kod ini, kami menghantar permintaan pos ke halaman yang dikenal pasti oleh URL relatif "/Pengguna". Kami juga menggunakan data parameter kedua untuk menghantar pelayan nama dan nilai medan yang kehilangan fokus. Akhir sekali, kami menggunakan fungsi panggil balik untuk mengesahkan bahawa nilai atribut status objek JSON yang dikembalikan adalah ralat, di mana kita memaparkan mesej ralat (disimpan dalam atribut mesej) kepada pengguna.

<code class="language-javascript">$.ajax(...);</code>

untuk memberi anda pemahaman yang lebih baik tentang apa jenis objek JSON ini kelihatan seperti, inilah contoh:

seperti yang saya katakan,

<code class="language-javascript">load(url[, data][, callback])</code>

adalah sama seperti

kecuali kerana dapat membuat permintaan. Jadi bahagian seterusnya akan sangat pendek dan saya akan memberi tumpuan kepada beberapa kes penggunaan dan bukannya mengulangi maklumat yang sama. $.get() $.post()

$. GET ()

$.get() adalah salah satu kaedah yang disediakan oleh jQuery untuk mengeluarkan permintaan mendapatkan. Kaedah ini memulakan permintaan GET ke pelayan menggunakan URL yang ditentukan dan data pilihan yang disediakan. Selepas permintaan selesai, ia juga boleh melaksanakan fungsi panggil balik. Tandatangannya adalah seperti berikut:

<code class="language-javascript">$('p').ajax(...);</code>

Parameter

adalah sama dengan kaedah $.post(), jadi saya tidak akan mengulanginya di sini.

Fungsi

$.get() sesuai untuk kes -kes di mana pelayan sentiasa mengembalikan hasil yang sama untuk set parameter yang diberikan. Ia juga merupakan pilihan yang baik untuk sumber yang anda mahu pengguna dapat berkongsi. Sebagai contoh, untuk perkhidmatan pengangkutan (seperti maklumat jadual waktu kereta api), orang yang mencari tarikh dan masa yang sama mesti mendapatkan hasil yang sama, dan permintaan GET adalah ideal. Di samping itu, jika halaman boleh bertindak balas untuk mendapatkan permintaan, pengguna boleh berkongsi hasil yang mereka dapatkan dengan rakan -rakan mereka - keajaiban URL.

Kesimpulan

Dalam artikel ini, kita membincangkan beberapa kaedah singkatan Ajax yang paling biasa digunakan untuk jQuery. Mereka adalah cara yang sangat mudah untuk melaksanakan permintaan Ajax, dan seperti yang dapat kita lihat, dalam versi asas mereka, hanya mengambil satu baris kod untuk mencapai apa yang kita mahu.

Sila periksa dokumentasi singkatan Ajax JQuery untuk maklumat lanjut mengenai kaedah ini dan lain -lain. Walaupun kami tidak membincangkan apa -apa lagi di sini, anda sepatutnya dapat menggunakan pengetahuan yang anda perolehi dalam artikel ini untuk memulakan dengan kaedah lain.

(bahagian FAQ harus ditambah di sini, kandungannya sama dengan bahagian FAQ dalam teks input)

Atas ialah kandungan terperinci Pengenalan Kaedah Ajax JQuery ' s. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!