Cara mendapatkan data json dari url di html

Question

Penggunaan JSON yang umum adalah membaca data dari server web, dan menampilkan data tersebut di halaman web

Table of Contents Show

Contoh JSON
Contoh JSON
Contoh Dijelaskan
myTutorials. txt
catatan tambahan
Bagaimana cara mengambil data JSON dari URL?
Bagaimana cara mengambil data dari JSON dalam HTML?
Bagaimana cara mendapatkan data JSON dari URL eksternal?
Bagaimana cara memuat data JSON dari URL dalam JavaScript?

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"
}
]

Lihat filenya »

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

Cobalah sendiri "

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 ditentukan

Penting. 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 lanjut

Objek 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"

}

1

Antarmuka 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 diaktifkan

1

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 gantinya

catatan 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="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div id="images"></div>
 
<script>
(function() {
  var flickerAPI = "https://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

Bagaimana cara mengambil data JSON dari URL?

loads() mengembalikan objek JSON. Di bawah ini adalah proses dimana kita dapat membaca respons JSON dari tautan atau URL dengan python. .

Impor modul yang diperlukan

Tetapkan URL

Dapatkan respons URL menggunakan urlopen()

Konversikan ke respons JSON menggunakan json. beban()

Tampilkan respons JSON yang dihasilkan

Bagaimana cara mengambil data dari JSON dalam HTML?

Kode jQuery menggunakan metode getJSON() untuk mengambil data dari lokasi file menggunakan permintaan HTTP GET AJAX . Dibutuhkan dua argumen. Salah satunya adalah lokasi file JSON dan yang lainnya adalah fungsi yang berisi data JSON. Fungsi each() digunakan untuk mengiterasi semua objek dalam array.