Ajax&Json —— Json

Posted 2021-01-17 cocoomg

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();
   }