JSON解析函数

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/15869595.html

使用XMLHttpRequest 从服务器获取数据：

<!DOCTYPE html>
<html>
<body>

<h1>使用 XMLHttpRequest 获取文件的内容</h1>

<p>JSON 格式的内容能够轻松转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "/example/json/json_demo.txt", true);
xmlhttp.send();
</script>

<p>查看 <a href="/example/json/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

在对衍生自数组的JSON使用JSON.parse()后，此方法将返回JavaScript 数组，而不是JavaScript对象。

<!DOCTYPE html>
<html>
<body>

<p>以 JSON 数组写的内容会被转换为 JavaScript 数组。</p>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myArr[0];
  }
};
xmlhttp.open("GET", "/demo/json_demo_array.txt", true);
xmlhttp.send();
</script>

<p>查看 <a href="/example/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>
</html>

JSON中不允许日期对象。如果您需要包含日期，请写为字符串。之后您可以将其转换回日期对象:

<!DOCTYPE html>
<html>
<body>

<h1>把字符串转换为 date 对象</h1>

<p id="demo"></p>

<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

使用parse()的第二个参数，这个参数是reviver,他代表函数（比如以下函数function()）：

<!DOCTYPE html>
<html>
<body>

<h1>把字符串转换为 date 对象</h1>

<p id="demo"></p>

<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

JSON中不允许函数。如果您需要包含函数，请把它写作字符串。稍后您可以把它转换回函数:

<!DOCTYPE html>
<html>
<body>

<h1>把字符串转换为函数</h1>

<p id="demo"></p>

<script>
var text = '{"name":"Bill Gates", "age":"function() {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");//这里加（），是因为执行的是一个匿名函数
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>