在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
JSON.parse(text[, reviver])
参数说明:
例如我们从服务器接收了以下数据:
我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:
解析完成后,我们就可以在网页上使用 JSON 数据了:解析前要确保你的数据是标准的 JSON 格式,否则会解析出错。
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS中文教程网 8939.org</title>
</head>
<body>
<h2>从 JSON 对象中创建 JavaScript 对象</h2>
<p id="demo"></p>
<script>
var str='{ "name":"JS中文教程网", "alexa":10000, "site":"www.8939.org" }';
var obj = JSON.parse(str);
document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;
</script>
</body>
</html>
|
我们可以使用 AJAX 从服务器请求 JSON 数据,并解析为 JavaScript 对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中文教程网 8939.org</title>
</head>
<body>
<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式,可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/json/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 JSON 文件数据 <a href="/json/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
|
如果从服务端接收的是数组的 JSON 数据,则 JSON.parse 会将其转换为 JavaScript 数组:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中文教程网 8939.org</title>
</head>
<body>
<h2>内容是数组</h2>
<p>内容是数组会转换为 JavaScript 数组。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[1];
}
};
xmlhttp.open("GET", "/json/json_demo_array.txt", true);
xmlhttp.send();
</script>
<p>查看服务端数据 <a href="/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
</body>
</html>
|
主流浏览器都支持 JSON.parse() 函数:
欢迎大家支持我的视频课程:JSON基础入门实战讲解