Cara menggunakan JJQUERY pada JavaScript

Indonesian [Bahasa Indonesia] translation by Baba Baddolo [you can also view the original English article]

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.

Markup

Untuk mendapatkan gambaran tentang struktur contoh ini, pertimbangkan markup berikut:

Markup untuk element main ditunjukkan di bawah ini:

      
        
Popular front-end frameworks
        
Click each one to load details via AJAX.
        

          Bootstrap
          Foundation
          UIkit
          Semantic UI
          Skeleton
          Material Design Lite
        
      

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 main terlihat pada tampilan:

' + 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 alwaysFunction dijalankan:

      function alwaysFunction[] {
          $loader.hide[];
          $modal.addClass['active'];
      }

Kelas active terlihat seperti ini:

      .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 Bootstrap :

Beberapa Skenario

Penting untuk memahami kode yang dieksekusi dalam kondisi tertentu.  Mari kita bahas dua skenario yang umum

• Nilai dari karakteristik name tidak sesuai dengan teks tautan dari elemen main . Sebagai contoh, mari kita asumsikan bahwa kita mendefinisikan sebuah URL dimana nilai dari karakteristik name dari objek yang terkait dengan kerangka dasar Foundation adalah Foundation2 dan bukan Foundation. Dalam kasus seperti ini, jika kita mengeklik tautan teks Foundation , modal di bawah akan muncul:

• Data tanggapan kosong. Katakanlah, misalnya, kita mendefinisikan sebuah URL yang menunjuk sebuah array kosong. Dalam kasus ini, modal akan terlihat seperti ini:

Penanganan Kesalahan

Jadi, 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 failFunction[] yang menunjukkan perilaku itu:

       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 fail akan dipicu dan modal di bawah ini akan ditampilkan:

Catatan: Sekali lagi, kesalahan pesan mungkin berbeda jika Anda menjalankan contoh ini secara lokal.

Inilah demo Codepen yang ditanamkan

Kesimpulan

Dalam 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:

• Biarkan menjadi terbiasa dengan metode jenjang jQuery's AJAX yang tidak kami sampaikan [misalnya metode $.getJSON ]
• Menerapkan permintaan AJAX Anda dengan mengakses baik itu data statis maupun data dinamis yang berasal dari pelayanan pihak ketiga [misalnya Flickr]

Apakah jQuery termasuk JavaScript?

jQuery digunakan untuk apa?

Apa beda JavaScript dan jQuery?

Apa itu jQuery dan contohnya?