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ụ:
1 2 3 4 5 6 7 8 9 10 11 |
<!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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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> |
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ủ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
File “json_demo.txt” với nội dung như sau:
1 2 3 4 5 6 7 8 9 |
{ "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