web前端之json解析

前言

这也是在w3school中学习前端时做的笔记,主要是简单讲一下JSON相关的知识

json语法规则

JSON 语法衍生于 JavaScript 对象标记法语法,是 JavaScript 语法的子集：

数据在名称/值对中
数据由逗号分隔
花括号容纳对象
方括号容纳数组

例:

{"employees":[
    { "firstName":"Bill", "lastName":"Gates" },
    { "firstName":"Steve", "lastName":"Jobs" },
    { "firstName":"Elon", "lastName":"Musk" }
]}

JSON 数据写为名称/值对。名称/值由字段名称构成，后跟冒号和值："{name":"Bill Gates}"
JSON 名称需要双引号。而 JavaScript 名称不需要。JSON –可作为 JavaScript 对象, 格式几乎等同于 JavaScript 对象。
在 JSON 中，键必须是字符串，由双引号包围.而值必须是以下数据类型之一：

字符串(必须用双引号)
数字(整数或浮点数)
对象（JSON 对象）
数组
boolean
null

因JSON语法部分继承JavaScript,故可将JavaScript对象与数组用作JSON值
JSON作为一种数据格式,同时也可以是JavaScript的对象,其属性访问方式类似JavaScript,也可以用for-in并同时使用obj[property]方式访问对象,并且json对象中值可以嵌套另一个json对象,其访问方式为通过使用点号和括号访问嵌套的 JSON 对象,修改删除也是类似JavaScript中一般对象的.例:

x = myObj.cars.car2;
//或者：
x = myObj.cars["car2"];

JSON值可以是数组或对象(包括json),里面可以相互嵌套值,修改删除类似上面

常用方法

使用JSON.parse() 把文本转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

注:日期\函数等数据JSON无法直接写入,需转换成字符串格式.读出则需将字符串转换成日期可使用reviver函数,例:

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;
   }});
 
//函数的转换,避免在 JSON 中使用函数，函数会丢失它们的作用域
var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

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

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_demo.txt", true);
xmlhttp.send();

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

使用 JSON.stringify() 把 JavaScript 对象/数组/日期转换为字符串,如果是函数则会将起从JavaScript对象删除,包括键与值(除非已将其转换成字符串):

var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON = JSON.stringify(obj);

//数组转换
var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON = JSON.stringify(arr);

常见应用

HTML 表格

使用作为 JSON 接收到的数据来生成表格：

obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4  && this.status == 200) {
        myObj = JSON.parse(this.responseText);
         txt += "<table border='1'>"
        for (x in myObj) {
             txt += "<tr><td>" + myObj[x].name + "</td></tr>";
        }
        txt += "</table>" 
        document.getElementById("demo").innerHTML  = txt;
    }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

动态 HTML 表格

使 HTML 表格基于下拉列表的值：选择一个选项： Customers Products Suppliers

<select id="myselect" onchange="change_myselect(this.value)">
    <option value="">Choose an option:</option>
    <option value="customers">Customers</option>
    <option value="products">Products</option>
    <option value="suppliers">Suppliers</option>
</select>

<script>
function  change_myselect(sel) {
    var obj, dbParam, xmlhttp, myObj,  x, txt = "";
    obj = { "table":sel, "limit":20 };
     dbParam = JSON.stringify(obj);
    xmlhttp = new  XMLHttpRequest();
    xmlhttp.onreadystatechange =  function() {
        if (this.readyState  == 4 && this.status == 200) {
             myObj = JSON.parse(this.responseText);
             txt += "<table border='1'>"
             for (x in myObj) {
                 txt += "<tr><td>" + myObj[x].name + "</td></tr>";
             }
            txt +=  "</table>" 
             document.getElementById("demo").innerHTML = txt;
         }
    };
    xmlhttp.open("POST", "json_demo_db_post.php",  true);
    xmlhttp.setRequestHeader("Content-type",  "application/x-www-form-urlencoded");
    xmlhttp.send("x="  + dbParam);
}
</script>

HTML 下拉列表

用接收到的 JSON 数据来生成 HTML 下拉列表：

obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
 xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4  && this.status == 200) {
        myObj = JSON.parse(this.responseText);
         txt += "<select>"
        for (x in myObj) {
             txt += "<option>" + myObj[x].name;
        }
        txt += "</select>" 
        document.getElementById("demo").innerHTML  = txt;
    }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);