JSON.parse()

JSON 的常规用途是同 web 服务器进行数据传输。

在从 web 服务器接收数据时,数据永远是字符串。

通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象或值。


语法

  1. JSON.parse(text[, reviver])
参数:
  1. text,要被解析成 JavaScript 值的字符串。

  2. reviver 可选,转换器, 如果传入该参数(函数),可以用来修改解析生成的原始值,调用时机在 parse 函数返回之前。


实例 – 解析 JSON

比如我们从 web 服务器接收到这段文本:

  1. '{ "name":"埃隆 马斯克", "age":50, "city":"洛杉矶"}'

请使用 JavaScript 函数 JSON.parse() 把文本转换为 JavaScript 对象:

  1. var obj = JSON.parse('{ "name":"埃隆 马斯克", "age":50, "city":"洛杉矶"}');

请确保这段文本以 JSON 格式书写,否则会出现语法错误。

请在您的页面中使用 JavaScript 对象:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>用 JSON 字符串创建对象</h1>
  5. <p id="demo">
  6. <script>
  7. var text = '{"employees":[' +
  8. '{"firstName":"埃隆","lastName":"马斯克" },' +
  9. '{"firstName":"马克","lastName":"扎克伯格" },' +
  10. '{"firstName":"比尔","lastName":"盖茨" }]}';
  11. obj = JSON.parse(text);
  12. document.getElementById("demo").innerHTML =
  13. obj.employees[1].firstName + " " + obj.employees[1].lastName;
  14. </script>
  15. </body>
  16. </html>

来自服务器的 JSON

您能够通过使用 AJAX 请求从服务器请求 JSON。

只要服务器的响应是用 JSON 格式编写的,你可以将字符串解析成 JavaScript 对象。

请使用 XMLHttpRequest 从服务器获取数据:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>使用 XMLHttpRequest 获取文件的内容</h1>
  5. <p>JSON 格式的内容能够轻松转换为 JavaScript 对象。</p>
  6. <p id="demo">
  7. <script>
  8. var xmlhttp = new XMLHttpRequest();
  9. xmlhttp.onreadystatechange = function() {
  10. if (this.readyState == 4 && this.status == 200) {
  11. var myObj = JSON.parse(this.responseText);
  12. document.getElementById("demo").innerHTML = myObj.name;
  13. }
  14. };
  15. xmlhttp.open("GET", "/example/json/json_demo.txt", true);
  16. xmlhttp.send();
  17. </script>
  18. <p>查看 <a href="/example/json/json_demo.txt" target="_blank">json_demo.txt</a></p>
  19. </body>
  20. </html>

查看 json_demo.txt


作为 JSON 的数组

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

从服务器返回的 JSON 是数组:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>数组内容</h1>
  5. <p>以 JSON 数组写的内容会被转换为 JavaScript 数组。</p>
  6. <p id="demo">
  7. <script>
  8. var xmlhttp = new XMLHttpRequest();
  9. xmlhttp.onreadystatechange = function() {
  10. if (this.readyState == 4 && this.status == 200) {
  11. var myArr = JSON.parse(this.responseText);
  12. document.getElementById("demo").innerHTML = myArr[0];
  13. }
  14. };
  15. xmlhttp.open("GET", "/demo/json_demo_array.txt", true);
  16. xmlhttp.send();
  17. </script>
  18. <p>查看 <a href="/example/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
  19. </body>
  20. </html>

查看 json_demo_array.txt


例外

解析日期

JSON 中不允许日期对象。

如果您需要包含日期,请写为字符串。

之后您可以将其转换回日期对象:

把字符串转换为日期:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>把字符串转换为 date 对象</h1>
  5. <p id="demo">
  6. <script>
  7. var text = '{"name":"埃隆 马斯克", "birth":"1965-10-28", "city":"洛杉矶"}';
  8. var obj = JSON.parse(text);
  9. obj.birth = new Date(obj.birth);
  10. document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
  11. </script>
  12. </body>
  13. </html>

或者您可以已使用 JSON.parse() 函数的第二个参数,被称为 reviver。这个 reviver 参数是函数,在返回值之前,它会检查每个属性。

将字符串转换为日期,使用 reviver 函数:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>把字符串转换为 date 对象</h1>
  5. <p id="demo">
  6. <script>
  7. var text = '{"name":"埃隆 马斯克", "birth":"1965-10-28", "city":"洛杉矶"}';
  8. var obj = JSON.parse(text, function (key, value) {
  9. if (key == "birth") {
  10. return new Date(value);
  11. } else {
  12. return value;
  13. }
  14. });
  15. document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
  16. </script>
  17. </body>
  18. </html>
解析函数

JSON 中不允许函数。

如果您需要包含函数,请把它写作字符串。

接下来您可以把它转换回函数:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>把字符串转换为函数</h1>
  5. <p id="demo">
  6. <script>
  7. var text = '{"name":"埃隆 马斯克", "age":"function() {return 50;}", "city":"洛杉矶"}';
  8. var obj = JSON.parse(text);
  9. obj.age = eval("(" + obj.age + ")");
  10. document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
  11. </script>
  12. </body>
  13. </html>

您应该避免在 JSON 中使用函数,函数会丢失它们的作用域,而且您还需要使用 eval() 把它们转换回函数。


浏览器支持

所有主流浏览器以及最新的 ECMAScript (JavaScript) 标准均包含 JSON.parse() 函数:

下表中的数字指定了完全支持 JSON.parse() 函数的首个浏览器版本:

Yes8.03.54.010.0