首页 > 代码库 > Json的引入

Json的引入

Json的引入

1:为什么要用Json?

JSON:JavaScript 对象表示法(JavaScript Object Notation) 。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。

2:Json 的格式语法

JSON 对象
{ "name":"张三" , "age":22}
JSON 数组
{
"student": [
{ "name":"张三" , "age":22 },
{ "name":"李四" , "age":23 },
{ "name":"王五" , "age":24 }
]
}
JSON 嵌套
{
"student": [
{ "name":"张三" , "age":22 ,"score":{"chinese":90,"math":100,"english":80} },
{ "name":"李四" , "age":23 ,"score":{"chinese":70,"math":90, "english":90} },
{ "name":"王五" , "age":24 ,"score":{"chinese":80,"math":60, "english":90} }
]
}
把 Json 串换成 Json 对象
var dataObj=eval("("+data+")");//转换为 json 对象

 

3:

当需要更加复杂的操作的时候,比如说JSON 数组里面的数据,我们不可能像字符串那样,用"\"转意然后拼接成json键值对的形式。我们需要引入第三方的架包。

Json-lib这个架包。

示例代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">    function loadInfo(){        var xmlHttp;        if(window.XMLHttpRequest){            xmlHttp=new XMLHttpRequest();        }else{            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        }        xmlHttp.onreadystatechange=function(){            if(xmlHttp.readyState==4 && xmlHttp.status==200){                alert(xmlHttp.responseText);                var dataObj=eval("("+xmlHttp.responseText+")");                alert(dataObj.name);                alert(dataObj.age);                document.getElementById("name").value=dataObj.name;                document.getElementById("age").value=dataObj.age;            }        };        xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);                xmlHttp.send();    }        function loadInfo2(){        var xmlHttp;        if(window.XMLHttpRequest){            xmlHttp=new XMLHttpRequest();        }else{            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        }        xmlHttp.onreadystatechange=function(){            if(xmlHttp.readyState==4 && xmlHttp.status==200){                alert(xmlHttp.responseText);                var dataObj=eval("("+xmlHttp.responseText+")");                var st=document.getElementById("studentTable");                alert(dataObj.students.length);                var newTr; //                var newTd0; // 第一列                var newTd1; // 第二列                var newTd2; // 第三列                for(var i=0;i<dataObj.students.length;i++){                    var student=dataObj.students[i];                    newTr=st.insertRow();                    newTd0=newTr.insertCell();                    newTd1=newTr.insertCell();                    newTd2=newTr.insertCell();                    newTd0.innerHTML=student.name;                    newTd1.innerHTML=student.age;                    newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;                }            }        };        // xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true);        xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true);        xmlHttp.send();    }</script></head><body><div style="text-align: center;">    <div><input type="button" onclick="loadInfo()" value="Ajax获取信息"/>&nbsp;&nbsp;姓名:<input type="text" id="name" name="name" />&nbsp;&nbsp;年龄:<input type="text" id="age" name="age" /></div>    <div style="margin-top: 20px;">        <input type="button" onclick="loadInfo2()" value="Ajax获取信息2"><br/>        <table id="studentTable" align="center" border="1px;" cellpadding="0px;">            <tr>                <th>姓名</th><th>年龄</th><th>得分</th>            </tr>        </table>    </div></div></body></html>

 

Json的引入