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()

$.getJSON(url, data, success);

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

function success(data) {
  // Process the 'data' object
}

bersamaan dengan menggunakan

menawarkan lebih banyak kawalan eksplisit: $.ajax()

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

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 ():

$.getJSON(url, data, success);

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

function success(data) {
  // Process the 'data' object
}

sampel html (): index.html

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

$. Ajax () <strong> Kaedah: <code>$.ajax()

$. Ajax () <p> Kaedah menyediakan kawalan yang lebih komprehensif, yang membolehkan penetapan pilihan yang jelas seperti <code> async <code>$.ajax() untuk pelaksanaan serentak: async

$(document).ready(() => {
  const $showData = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bshow-data');
  const $raw = $('pre');

  $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bget-data').on('click', (e) => {
    e.preventDefault();
    $showData.text('Loading...');
    $.getJSON('example.json', (data) => {
      const markup = data.items.map(item => `<li>${item.key}: ${item.value}</li>`).join('');
      const list = $('<ul></ul>').html(markup);
      $showData.html(list);
      $raw.text(JSON.stringify(data, undefined, 2));
    });
  });
});

overridemimeType <p> ditunjukkan untuk tujuan ilustrasi; JQuery biasanya mengendalikan jenis mime secara automatik. <code>overrideMimeType

Pengendalian Pengesahan dan Ralat JSON:

Sentiasa mengesahkan JSON menggunakan alat seperti JSONLINT. Kesalahan biasa termasuk kesilapan sintaks (token yang tidak dijangka), sering disebabkan oleh JSON yang cacat. Debugging melibatkan memeriksa tindak balas pelayan, jenis mime, dan menggunakan pembalakan konsol untuk memeriksa data.

Kesimpulan:

json adalah format pertukaran data penting, dan kaedah JQuery's

dan $. Ajax () <code>$.getJSON() Memudahkan penggunaannya dalam aplikasi web. Pengendalian pengesahan dan ralat yang betul adalah penting untuk integrasi JSON yang mantap. $.ajax()

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