Laman » Pengekodan » Campurkan Ajax Ke HTML dengan Intercooler.js

    Campurkan Ajax Ke HTML dengan Intercooler.js

    Ia tidak pernah menjadi lebih mudah tambah Ajax ke laman web mana pun. Malah ia cukup biasa untuk membina laman web keseluruhan berdasarkan permintaan Ajax dipanggil Aplikasi Satu-Halaman (atau SPA).

    Bagaimanapun, ini selalu memerlukan sedikit jQuery dan beberapa teknik bertengkar kemas kini kandungan halaman. Sekiranya anda memerlukan beberapa fungsi Ajax asas anda boleh gunakan intercooler.js untuk menggabungkan hak ini ke dalam HTML anda.

    Intercooler membolehkan anda menulis atribut HTML itu secara asalnya mengandungi URL permintaan Ajax. Apabila pengguna mengklik pautan tertentu anda boleh mendikte itu Permintaan Ajax dijalankan bukan tindakan klik biasa.

    Ini semua bergantung kepada data HTML5- * atribut seperti ic-post-to. Anda boleh menambah atribut ini pada butang atau pautan utama, dan ia akan secara automatik bersambung ke jQuery untuk permintaan POS Ajax.

    Sebenarnya ada halaman penuh dengan atribut ini di laman web plugin. Berikut adalah sedikit kod sampel untuk melihat bagaimana ia kelihatan:

    Klik Me!

    Ini akan hantar permintaan POS Ajax ke URL / buton_click, dan beban tindak balas ke dalam elemen kontena. Intercooler adalah perpustakaan yang sangat mudah dan sangat berkuasa apabila anda memahami bagaimana ia berfungsi.

    Diberikan ini tidak akan menyelesaikan semua masalah Ajax anda kerana ia tidak boleh auto-kemas kini bahagian lain halaman. Ia juga tidak dapat menambahkan terlalu banyak ciri tersuai tanpa melambatkan halaman, jadi terperinci SPA sepatutnya menggunakan kod Ajax adat.

    Intercooler.js menawarkan a cara semantik untuk menulis kod Ajax supaya ia dimuatkan dan juga menawarkan sandaran asli.

    Untuk memasang intercooler anda hanya perlu salinan jQuery bersama dengan a salinan perpustakaan intercooler yang boleh didapati di GitHub. Anda juga boleh ujian tanpa muat turun sebarang fail dengan menggunakan CDN jQuery dan CDN Intercooler setempat.

    Letakkan keduanya menjadi a > tag dalam tajuk halaman anda, dan kemudian letakkan atribut HTML di mana saja anda mahu!

    Ambil mengintip di halaman demo untuk melihat a Senarai penuh demo anda boleh mainan dengan. Saya sangat suka demo 'Klik untuk Edit' kerana ia menunjukkan apa yang mungkin dan sejauh mana anda boleh mengambil plugin ini.

    Sekiranya anda berminat belajar lebih banyak semak panduan rujukan penuh sifat HTML intercooler. Setiap satu melakukan tindakan yang berbeza jadi sangat penting untuk mengkaji semuanya dan melihat apa sesuai dengan yang terbaik untuk senario anda.

    Sememangnya, anda boleh mencari semua kod sumber secara percuma di GitHub bersama dengan a panduan pemasangan ringkas.