Json 知识储备

最新推荐文章于 2022-12-23 22:01:26 发布

ybbinRush

最新推荐文章于 2022-12-23 22:01:26 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/weixin_44279798/article/details/104124521

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

json

2 篇文章 0 订阅

订阅专栏

文章目录

Json

Json

1 Json引入

JSON：JavaScript 对象表示法（JavaScriptObjectNotation）。是一种轻量级数据交换格式，基于js的
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析

2 Json格式语法

在这里插入图片描述
获取到json串后，需要换取json串里面的数据需要将json串转换成json对象
把 Json 串换成 Json 对象
vardataObj=eval("("+data+")");//转换为 json 对象

简单实例

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

后台核心代码：

 private void getJsonObject(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  PrintWriter out=response.getWriter();
  String resultJson="{\"name\":\"张三\",\"age\":22}";
 out.println(resultJson);
  out.flush();
  out.close();
 }

3 Json第三方jar包引入

json-lib，可以更加方便的编写json对象，导入包后，可以直接声明JSONObject对象，直接用put的方法加入json对象元素，而无需自己编写json字符串。

<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+")");//转换成json对象
    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];//students是一个数组，需要遍历获取；student是一个json对象，可以直接用‘.’来获取里面的数据
     newTr=st.insertRow();//插入行对象
     newTd0=newTr.insertCell();//cell是单元格的意思，这里指插入单元格
     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>

后台核心代码

private void getJsonNested(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  PrintWriter out=response.getWriter();
  JSONObject resultJson=new JSONObject();//声明一个大json对象
  JSONArray jsonArray=new JSONArray();//声明json数组对象
  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);//向数组对象里面添加json对象
  jsonArray.add(jsonObject2);
  jsonArray.add(jsonObject3);
  
  resultJson.put("students", jsonArray);
  out.println(resultJson);
  out.flush();
  out.close();
 }

总结：首相需要将json串转换成json对象，如果是数组则需要遍历获取对象，否则直接从json对象里面获取数据需要用"."；
另外，json对象里面添加数据用put方法；json数组对象里面添加json对象用add方法。

ybbinRush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Json 知识储备

Json1 Json引入JSON：JavaScript 对象表示法（JavaScriptObjectNotation）。是一种轻量级数据交换格式，基于js的JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析2 Json格式语法获取到json串后，需要换取json串里面的数据需要将json串转换成json对象把 Json 串换成 Json ...
复制链接

扫一扫