JSON Server – Xử lý dữ liệu khi nhận, gửi tới máy chủ web

JSON 5 Views

Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến / từ máy chủ web. Như chúng ta đã biết dữ liệu JSON luôn là một chuỗi. Vì vậy khi nhận và gửi dữ liệu JSON với máy chủ ta cần sử dụng 2 hàm JSON.stringify() và JSON.parse() để xử lý dữ liệu.

Table of Contents

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

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>
<script>
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>

const myObj = { name: "John", age: 31, city: "New York" };

const myJSON = JSON.stringify(myObj);

window.location = "demo_json.php?x=" + myJSON;

</script>

</body>

</html>

Kết quả:

demo_json.php:

John from New York is 31

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:

<!DOCTYPE html>
<html>
<body>
<h2>Convert a JSON string into a JavaScript object.</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Convert a JSON string into a JavaScript object.</h2>

const myJSON = '{"name":"John", "age":31, "city":"New York"}';

const myObj = JSON.parse(myJSON);

document.getElementById("demo").innerHTML = myObj.name;

</script>

</body>

</html>

Kết quả:

Convert a JSON string into a JavaScript object.

John

Yêu cầu 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.

Ví dụ Sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ:

<!DOCTYPE html>
<html>
<body>
<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p id="demo"></p>
<script>
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();
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>

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

</script>

</body>

</html>

File “json_demo.txt” với nội dung như sau:

{
    "name":"John",
    "age":31,
    "pets":[
        { "animal":"dog", "name":"Fido" },
        { "animal":"cat", "name":"Felix" },
        { "animal":"hamster", "name":"Lightning" }
    ]
}

{

"name":"John",

"age":31,

"pets":[

{ "animal":"dog", "name":"Fido" },

{ "animal":"cat", "name":"Felix" },

{ "animal":"hamster", "name":"Lightning" }

]

}

Kết quả:

Fetch a JSON file with XMLHttpRequest

John

JSON

JSON Server – Xử lý dữ liệu khi nhận, gửi tới máy chủ web

Gửi dữ liệu

Nhận dữ liệu

Yêu cầu JSON từ máy chủ

Related posts: