Penggunaan JSON yang umum adalah membaca data dari server web, dan menampilkan data tersebut di halaman web
Bab ini akan mengajari Anda, dalam 4 langkah mudah, cara membaca data JSON, menggunakan XMLHttp
Contoh JSON
Contoh ini membaca menu dari myTutorials. txt, dan menampilkan menu di halaman web
Contoh JSON
Cobalah sendiri "Contoh Dijelaskan
1. Buat array objek
Gunakan literal array untuk mendeklarasikan array objek
Berikan setiap objek dua properti. tampilan dan url
Beri nama array myArray
myArray
var susunanku = [
{
"menampilkan". "Tutorial JavaScript",
"url". "https. // www. w3schools. com/js/default. asp"
},
{
"menampilkan". "Tutorial HTML",
"url". "https. // www. w3schools. com/html/default. asp"
},
{
"menampilkan". "Tutorial CSS",
"url". "https. // www. w3schools. com/css/default. asp"
}
]
2. Buat fungsi JavaScript untuk menampilkan array.
Buat fungsi myFunction() yang mengulang objek array, dan tampilkan konten sebagai tautan HTML
Fungsiku()
function myFunction(arr) {
var keluar = "";
var i;
untuk(i = 0; i < arr. panjang;
keluar += '' + arr[i]. tampilkan + '
';
}
dokumen. getElementById("id01"). innerHTML = keluar;
}
Panggil Function() dengan Array sebagai argumen
3. Buat file teks
Masukkan array literal ke dalam file bernama myTutorials. txt
myTutorials. txt
[
{
"menampilkan". "Tutorial JavaScript",
"url". "https. // www. w3schools. com/js/default. asp"
},
{
"menampilkan". "Tutorial HTML",
"url". "https. // www. w3schools. com/html/default. asp"
},
{
"menampilkan". "Tutorial CSS",
"url". "https. // www. w3schools. com/css/default. asp"
}
]
4. Baca file teks dengan XMLHttpRequest
Tulis XMLHttpRequest untuk membaca file teks, dan gunakan myFunction() untuk menampilkan larik
var xmlhttp = XMLHttpRequest baru();
var url = "Tutorialku. txt";
xmlhttp. onreadystatechange = fungsi() {
jika ini. readyState == 4 && ini. status == 200) {
var myArr = JSON. mengurai (ini. responseText);
myFunction(myArr);
}
};
xmlhttp. buka ("DAPATKAN", url, benar);
xmlhttp. mengirim();
Data yang dikirim ke server ditambahkan ke URL sebagai string kueri. Jika nilai parameter data_ adalah objek biasa, maka akan diubah menjadi string dan disandikan url sebelum ditambahkan ke URL
Sebagian besar implementasi akan menentukan penangan sukses
1
2
3
4
5
6
7
8
9
10
11
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
Contoh ini, tentu saja, bergantung pada struktur file JSON
1
2
3
4
5
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
_Dengan menggunakan struktur ini, contoh mengulang melalui data yang diminta, membuat daftar tidak terurut, dan menambahkannya ke badan
Callback success diteruskan data yang dikembalikan, yang biasanya berupa objek atau larik JavaScript seperti yang didefinisikan oleh struktur JSON dan diuraikan menggunakan metode $.parseJSON(). Itu juga melewati status teks dari respons
Pada jQuery 1. 5, fungsi callback success_ menerima (dalam jQuery 1. 4, ia menerima objek
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
_1). Namun, karena permintaan JSONP dan GET lintas-domain tidak menggunakan XHR, dalam kasus tersebut, parameter$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
2 dan$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
3 yang diteruskan ke callback sukses tidak ditentukanPenting. Pada jQuery 1. 4, jika file JSON berisi kesalahan sintaksis, permintaan biasanya akan gagal secara diam-diam. Hindari sering mengedit data JSON secara manual karena alasan ini. JSON adalah format pertukaran data dengan aturan sintaksis yang lebih ketat daripada notasi literal objek JavaScript. Misalnya, semua string yang direpresentasikan dalam JSON, apakah itu properti atau nilai, harus diapit dengan tanda kutip ganda. Untuk detail tentang format JSON, lihat https. //json. org/
JSONP
Jika URL menyertakan string "callback=?" . Lihat pembahasan tipe data
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
_4 di$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
5 untuk detail lebih lanjutObjek jqXHR
Pada jQuery 1. 5, semua metode Ajax jQuery mengembalikan superset dari objek
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
6. Objek jQuery XHR ini, atau "jqXHR", dikembalikan oleh$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
7 mengimplementasikan antarmuka Promise, memberikannya semua properti, metode, dan perilaku Promise (lihat Objek yang ditangguhkan untuk informasi lebih lanjut).$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
8 (untuk sukses),$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
9 (untuk kesalahan), dan{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
0 (untuk penyelesaian, apakah berhasil atau salah; ditambahkan di jQuery 1. 6) metode mengambil argumen fungsi yang dipanggil saat permintaan berakhir. Untuk informasi tentang argumen yang diterima fungsi ini, lihat bagian dokumentasi{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
1Antarmuka Janji di jQuery 1. 5 juga memungkinkan metode Ajax jQuery, termasuk
$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
7, untuk menghubungkan beberapa callback{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
3,{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
4, dan{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
5 pada satu permintaan, dan bahkan untuk menetapkan callback ini setelah permintaan selesai. Jika permintaan sudah selesai, callback akan segera diaktifkan1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
console.log( "second complete" );
});
Pemberitahuan Penghentian
Metode callback ________1______6,
{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
7, dan{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
8 dihapus pada jQuery 3. 0. Anda dapat menggunakan$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
8,$.getJSON( "ajax/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
9, dan{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
0 sebagai gantinyacatatan tambahan
- Karena pembatasan keamanan browser, sebagian besar permintaan "Ajax" tunduk pada kebijakan asal yang sama;
- Permintaan skrip dan JSONP tidak tunduk pada batasan kebijakan asal yang sama
Contoh
Memuat empat foto Gunung Rainier terbaru dari Flickr JSONP API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
var flickerAPI = "//api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 3 ) {
return false;
}
});
});
})();
</script>
</body>
</html>
Demo
Muat data JSON dari pengujian. js, meneruskan data tambahan, dan mengakses nama dari data JSON yang dikembalikan. Jika terjadi kesalahan, catat pesan kesalahan sebagai gantinya