Cara menggunakan JJQUERY pada JavaScript
Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article) Show Setelah mengikuti tiga tutorial sebelumnya, Anda seharusnya sudah mendapatkan pemahaman yang baik tentang AJAX. Dalam tutorial akhir ini, kita akan menyelesaikan semuanya dengan bekerja dengan contoh yang lebih sulit. MarkupUntuk mendapatkan gambaran tentang struktur contoh ini, pertimbangkan markup berikut: Markup untuk element
Perhatikan tautan teks. al ini berhubungan dengan kerangka kerja front-end yang berbeda. Seperti yang akan kita lihat pada bagian selanjutnya, setiap kali kita mengklik tautan, permintaan AJAX akan dijalankan. Kemudian, elemen dengan kelas modal akan muncul dan kontennya akan diperbarui dengan data yang diambil dari respon. Seperti ini lah bagaimana elemen Modal MarkupTahap selanjutnya adalah memeriksa struktur dari modal kita. Berikut adalah kode HTML: Berikut adalah kode HTML:
Seperti yang dapat Anda lihat, modal berisi beberapa elemen kosong. Kami menempatkan mereka di HTML karena teks mereka akan berubah tergantung pada tautan mana yang kita klik dan respon yang kita dapatkan Gambar dibawah menunjukan bagaimana modal awalnya muncul: Secara default, modal disembunyikan. elain itu, kita juga akan menyembunyikan loader. Hal ini akan muncul hanya saat permintaan AJAX digerakkan. Lihatlah aturan CSS yang sesuai: .modal { opacity: 0; } .loader { display: none; } Perhatikan bahwa kita menggunakan karakteristik Mengeluarkan respon JSONUntuk maksud dari contoh ini, kita memilih untuk membangun respon JSON sendiri. Secara khusus, respons yang diharapkan (sebagai contoh fail Selain itu, nilai dari karakteristik [ { "url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "name": "Bootstrap" }, { "url": "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation" }, // 4 more objects here ] Catatan: Nilai yang kita digunakan untuk karakteristik Serupa dengan contoh sebelumnya di seri ini, kita akan menggunakan AJAX untuk meminta fail statis. Namun, jika kita ingin menyematkan konten yang berasal dari situs lain (misalnya Google Maps, Flickr), kita harus membaca dokumentasi API mereka, dan jika perlu, mengajukan permohonan kunci API. Selanjutnya, data target kita tinggal di server yang sama dengan halaman demo. Oleh karena itu, kita menghindari keterbatasan yang mungkin terjadi saat berinteraksi dengan layanan pihak ketiga (lihat bagian "Keterbatasan Permintaan AJAX" pada tutorial pertama). Penerapan permintaan AJAXPada bagian ini, kita akan menggunakan fungsi jQuery var $list = $('.m-info'), var $message = $('.m-message'); var $modal = $('.modal'); var $loader = $('.loader'); var $framework; Sekarang, saatnya untuk memeriksa kode yang bertanggung jawab atas pelaksanaan permintaan: $('.boxes a').on('click', function(e) { e.preventDefault(); $framework = $(this).text(); $.ajax({ url: 'Demo.json', dataType: 'json', beforeSend: function() { $loader.show(); } }).done(successFunction) .fail(errorFunction) .always(alwaysFunction); }); Anda akan melihat sintaks untuk fungsi $.ajax([settings]) arameter
Sebelum kita lanjut menuju bahasan berikutnya, terdapat 3 hal yang perlu disebutkan:
Metode PromiseFungsi Dalam contoh ini, kita menggunakan metode Promise berikut:
Metode Fungsi callback (misalnya Metode Fungsi callback (contoh Metode Keadaan permintaan menentukan argumen fungsi Jika permintaan berhasil, callback (mis Catatan: Sebagai gantinya Tampilan DataJika permintaan berhasil, kita bisa mendapatkan kembali data tanggapan. Kemudian, kita memanipulasinya sehingga bisa mengisi elemen modal yang kosong. Pertimbangan kode untuk callback function successFunction(data) { if (data.length > 0) { for (var i = 0; i < data.length; i++) { if ($framework === data[i].name) { $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break; } else { $list.hide(); $message.show().text('No data received for this framework!'); } } } else { $list.hide(); $message.text('No data received from your respose!'); } } Meski kita memperbarui konten modal kita, ini masih tersembunyi. Hal in terlihat dan loader menghilang ketika permintaan berakhir. Hanya kemudian, callback function alwaysFunction() { $loader.hide(); $modal.addClass('active'); } Kelas .active { opacity: 1; z-index: 10; transform: scale(1); } Di bawah ini Anda dapat melihat penampilan diharapkan dari modal jika kita klik pada tautan
teks Beberapa SkenarioPenting untuk memahami kode yang dieksekusi dalam kondisi tertentu. Mari kita bahas dua skenario yang umum
Penanganan KesalahanJadi, kita telah membahas kode yang dkeluarkan saat permintaan berhasil. api apa jadinya jika permintaan gagal? Jika permintaan tidak berhasil, kami menyembunyikan daftar dan menampilkan pesan khusus. Inilah kode function failFunction(request, textStatus, errorThrown) { $list.hide(); $message.text('An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown); } Untuk membiasakan diri dengan kode ini, kami menentukan URL yang tidak ada. Oleh karena itu, metode Catatan: Sekali lagi, kesalahan pesan mungkin berbeda jika Anda menjalankan contoh ini secara lokal. Inilah demo Codepen yang ditanamkan KesimpulanDalam tutorial ini kita menyimpulkan pemeriksaan AJAX dari perspektif perancang web - dilakukan dengan baik selama mengikuti tutorial ini! Saya harap Anda menemukan manfaat dari rangkaian tutorial ini dan Anda mempelajari beberapa keterampilan baru. Sebagai langkah selanjutnya, saya menganjurkan Anda untuk memeriksa hal-hal berikut:
Apakah jQuery termasuk JavaScript?jQuery adalah library JavaScript yang cukup andal, ringkas, dan mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di HTML seperti perubahan dan manipulasi dokumen, event handling, animasi, dan Ajax dapat menjadi lebih sederhana.
jQuery digunakan untuk apa?Fungsi jQuery
Selain memiliki fungsi utama sebagai library JavaScript yang membantu mengatur interaksi antara JavaScript dan HTML atau website. jQuery juga memiliki fungsi lengkap sebagai berikut: Mempermudah pencarian, penyeleksian, melakukan manipulasi elemen-elemen DOM pada JavaScript.
Apa beda JavaScript dan jQuery?Perbedaan antara jQuery dan JavaScript adalah bahwa jQuery lebih sederhana dan lebih mudah tetapi JavaScript lebih kuat dan tidak mengecewakan Dave.
Apa itu jQuery dan contohnya?jQuery adalah library JavaScript open-source yang di-minify dan dibuat untuk operasi JavaScript yang disederhanakan. Anda bisa menggunakan jQuery untuk coding serangkaian perintah dengan cepat, yang pada dasarnya akan memerlukan waktu lebih lama apabila menggunakan kode HTML.
|