Json的引入

浏览数：34 / 时间：2015年06月09日

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>