Ajax/jQuery.getjson contoh mudah

Artikel ini menerangkan kepentingan JSON dan aplikasi praktikalnya dalam pembangunan web, menonjolkan fungsi mudah JQuery untuk mengendalikan data JSON.

Mata utama:

JSON (JavaScript Object Notation) adalah format bahasa-agnostik, berasaskan teks yang sesuai untuk penghantaran data dalam aplikasi web. Struktur ringkas menjadikannya lebih cekap daripada XML.
Kaedah JQuery's
• memudahkan memuatkan data JSON dari sumber jauh. Ia menerima URL, data pilihan untuk pelayan, dan fungsi panggil balik untuk respons yang berjaya. $.getJSON()
Kaedah yang lebih serba boleh
• menawarkan kawalan yang lebih baik ke atas parameter permintaan, termasuk operasi tak segerak ($.ajax()). async: true
Mengesahkan JSON Menggunakan alat seperti JSONLINT adalah penting kerana sintaks ketat JSON. Kesalahan seperti trailing koma atau pemformatan utama yang tidak konsisten boleh menyebabkan masalah.
Debugging masalah JSON melibatkan mengesahkan format JSON dan jenis MIME pelayan, dan memeriksa data yang dikembalikan menggunakan pembalakan konsol.

Memahami JSON:

json, atau notasi objek JavaScript, adalah format berasaskan teks, bebas bahasa yang biasa digunakan untuk pertukaran data dalam aplikasi web. Artikel ini memberi tumpuan kepada mendapatkan data JSON melalui permintaan HTTP GET (kaedah lain seperti pos juga mungkin).

Kecekapan JSON berpunca dari struktur padatnya, yang membawa kepada saiz fail yang lebih kecil dan parsing lebih cepat berbanding dengan XML. Kecekapan ini meliputi format binari seperti BSON, yang memanfaatkan perwakilan objek JSON.

jQuery dan json:

JQuery menyediakan kaedah

untuk pengendalian JSON yang diselaraskan. Ia adalah versi mudah $.getJSON(), secara tersirat menetapkan pilihan yang relevan. Sintaks adalah: $.ajax()

<code class="language-javascript">$.getJSON(url, data, success);</code>

• : URL sumber data JSON (diperlukan). url
• : data pilihan untuk dihantar ke pelayan (objek atau rentetan). data
• : Fungsi panggil balik yang dilaksanakan pada pengambilan semula yang berjaya (pilihan). Panggilan balik mudah mungkin kelihatan seperti: success

<code class="language-javascript">function success(data) {
  // Process the 'data' object
}</code>

bersamaan dengan menggunakan

menawarkan lebih banyak kawalan eksplisit: $.ajax()

<code class="language-javascript">$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});</code>

Aplikasi Contoh: Demonstrasi mudah menggunakan node.js dengan pakej

untuk menyampaikan fail JSON statik (

). JavaScript () menggunakan live-server untuk mengambil dan memaparkan data. example.json main.js $.getJSON() sampel javascript ():

<code class="language-javascript">$.getJSON(url, data, success);</code>

Kod ini menunggu DOM untuk memuatkan, kemudian mengendalikan acara klik untuk mengambil JSON, menukar bahagian ke senarai yang tidak teratur dan memaparkan JSON mentah. Sifat asynchronous $.getJSON() ditunjukkan.

sampel json (example.json):

<code class="language-javascript">function success(data) {
  // Process the 'data' object
}</code>

sampel html (): index.html

<code class="language-javascript">$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});</code>

Atas ialah kandungan terperinci Ajax/jQuery.getjson contoh mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!