JSON 服务器
JavaScript基础 2022-04-25 01:54:18小码哥的IT人生shichen
JSON 服务器
JSON 的一个常见用途是与 Web 服务器交换数据。
从 Web 服务器接收数据时，数据始终是字符串。
用 JSON.parse() 解析数据，数据会成为 JavaScript 对象。
发送 Data
如果您将数据存储在 JavaScript 对象中，则可以将对象转换为 JSON，并将其发送到服务器：
示例代码：
const myObj = {name: "Bill", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>发送 Data</h1>
<p>将对象转换为 JSON，并将其发送到服务器</p>
<script>
const myObj = {name: "Bill", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
window.location = "/demo/demo_json.php?x=" + myJSON;
</script>
</body>
</html>
运行结果：
domo_json.php： 来自 New York 的 Bill 今年 31 岁了。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
接收 Data
如果您接收 JSON 格式的数据，则可以轻松地将其转换为 JavaScript 对象：
示例代码：
const myJSON = '{"name":"Bill", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>接收 Data</h1>
<p>接收 JSON 格式的数据，转换为 JavaScript 对象</p>
<p id="demo"></p>
<script>
const myJSON = '{"name":"Bill", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>
运行结果：
接收 Data 接收 JSON 格式的数据，转换为 JavaScript 对象 Bill
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
来自服务器的 JSON
您可以使用 AJAX 请求从服务器请求 JSON
只要来自服务器的响应以 JSON 格式编写，您就可以将字符串解析为 JavaScript 对象。
示例代码：
使用 XMLHttpRequest 从服务器获取数据：
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json.txt");
xmlhttp.send();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>来自服务器的 JSON</h1>
<p>AJAX 请求从服务器请求 JSON</p>
<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", "/demo/json.txt");
xmlhttp.send();
</script>
</body>
</html>
运行结果：
来自服务器的 JSON AJAX 请求从服务器请求 JSON Bill
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请参见：json.txt
数组形式的 JSON
在从数组派生的 JSON 上使用 JSON.parse() 时，该方法会返回 JavaScript 数组，而不是 JavaScript 对象。
示例代码：
从服务器以数组返回的 JSON：
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
xmlhttp.open("GET", "json_array.txt", true);
xmlhttp.send();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>数组形式的 JSON</h1>
<p>使用 JSON.parse() 时，该方法会返回 JavaScript 数组</p>
<p id="demo"></p>
<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
xmlhttp.open("GET", "/demo/json_array.txt", true);
xmlhttp.send();
</script>
</body>
</html>
运行结果：
数组形式的 JSON 使用 JSON.parse() 时，该方法会返回 JavaScript 数组 Tesla
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请参见：json_array.txt
