JSON tut 9 : JSON Server

0
0
(0)

https://www.w3schools.com/js/js_json_server.asp

Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến / từ máy chủ web.

Khi nhận dữ liệu từ máy chủ web, dữ liệu luôn là một chuỗi.

Phân tích cú pháp dữ liệu với JSON.parse()và dữ liệu trở thành một đối tượng JavaScript.


Gửi dữ liệu

Nếu bạn có dữ liệu được lưu trữ trong một đối tượng JavaScript, bạn có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ:

Thí dụ

const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;


Hãy tự mình thử »


Nhận dữ liệu

Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể dễ dàng chuyển đổi nó thành một đối tượng JavaScript:

Thí dụ

const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Hãy tự mình thử »


JSON từ máy chủ

Bạn có thể yêu cầu JSON từ máy chủ bằng cách sử dụng yêu cầu AJAX

Miễn là phản hồi từ máy chủ được viết ở định dạng JSON, bạn có thể phân tích cú pháp chuỗi thành một đối tượng JavaScript.

Thí dụ

Sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ:const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();

Hãy tự mình thử »

Hãy xem json_demo.txt



Mảng dưới dạng JSON

Khi sử dụng JSON.parse()trên JSON bắt nguồn từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.

Thí dụ

JSON được trả về từ máy chủ dưới dạng một mảng:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
  }
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Hãy tự mình thử »

Hãy xem json_demo_array.txt

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Leave A Reply

Your email address will not be published.