Ajax&Json —— Json

1. Json 引入

基于JS 的一种轻量级的数据交换格式！“key”:“value”的书写格式

• 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. Ajax&Json 交互简单实例

1. 获取Json 对象：Json 第三方 jar 包引入: Json-lib

   private void getJsonObject(HttpServletRequest request, HttpServletResponse response) ???????????throws ServletException, IOException { ???PrintWriter out=response.getWriter(); ???// String resultJson="{\"name\":\"张三\",\"age\":22}"; //引入jar包前 ???JSONObject resultJson=new JSONObject();
    ???//引入jar包后 ???resultJson.put("name", "张三"); ???resultJson.put("age", 22); ???out.println(resultJson); ???out.flush(); ???out.close();}

   <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+")"); ?//将Json串转换为Json对象 ???????????????document.getElementById("name").value=dataObj.name; ???????????????document.getElementById("age").value=dataObj.age; ???????????} ???????}; ???????xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true); ???????????????xmlHttp.send(); ???}</script>

2. 获取Json 数组

   private void getJsonArray(HttpServletRequest request, HttpServletResponse response) ???????throws ServletException, IOException { ???PrintWriter out=response.getWriter(); ???JSONObject resultJson=new JSONObject(); ???JSONArray jsonArray=new JSONArray(); ???JSONObject jsonObject1=new JSONObject(); ???jsonObject1.put("name", "张三"); ???jsonObject1.put("age", 22); ???JSONObject jsonObject2=new JSONObject(); ???jsonObject2.put("name", "李四"); ???jsonObject2.put("age", 23); ???JSONObject jsonObject3=new JSONObject(); ???jsonObject3.put("name", "王五"); ???jsonObject3.put("age", 24); ???jsonArray.add(jsonObject1); ???jsonArray.add(jsonObject2); ???jsonArray.add(jsonObject3); ???????resultJson.put("students", jsonArray); ???out.println(resultJson); ???out.flush(); ???out.close();}

3. 获取Json 嵌套：无限嵌套

   private void getJsonNested(HttpServletRequest request, HttpServletResponse response) ???????throws ServletException, IOException { ???PrintWriter out=response.getWriter(); ???JSONObject resultJson=new JSONObject(); ???JSONArray jsonArray=new JSONArray(); ???JSONObject jsonObject1=new JSONObject(); ???jsonObject1.put("name", "张三"); ???jsonObject1.put("age", 22); ???????JSONObject scoreObject1=new JSONObject(); ???scoreObject1.put("chinese", 90); ???scoreObject1.put("math", 100); ???scoreObject1.put("english", 80); ???jsonObject1.put("score", scoreObject1); ???????JSONObject jsonObject2=new JSONObject(); ???jsonObject2.put("name", "李四"); ???jsonObject2.put("age", 23); ???????JSONObject scoreObject2=new JSONObject(); ???scoreObject2.put("chinese", 70); ???scoreObject2.put("math", 90); ???scoreObject2.put("english", 90); ???jsonObject2.put("score", scoreObject2); ???????JSONObject jsonObject3=new JSONObject(); ???jsonObject3.put("name", "王五"); ???jsonObject3.put("age", 24); ???????JSONObject scoreObject3=new JSONObject(); ???scoreObject3.put("chinese", 80); ???scoreObject3.put("math", 60); ???scoreObject3.put("english", 90); ???jsonObject3.put("score", scoreObject3); ???????jsonArray.add(jsonObject1); ???jsonArray.add(jsonObject2); ???jsonArray.add(jsonObject3); ???????resultJson.put("students", jsonArray); ???out.println(resultJson); ???out.flush(); ???out.close();}

   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); //获取Json 数组 ???xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true); ??//获取Json 嵌套 ???xmlHttp.send();}

Ajax&Json —— Json

原文地址：https://www.cnblogs.com/Cocoomg/p/9900749.html