ajax响应json字符串和json数组

喜欢ヅ旅行 2022-08-08 13:45 375阅读 0赞 
  1. 最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。
  6. 直接看代码。

json字符串的后台响应

  1. package com.ajax;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. @WebServlet("/jsonStr")
  13. public class JsonStr extends HttpServlet {
  15.     /**
  16.      * 
  17.      */
  18.     private static final long serialVersionUID = 1L;
  20.     @Override
  21.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  22.             throws ServletException, IOException {
  23.         // 构造json对象
  24.         String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
  26.         // 输出json对象到前台
  27.         PrintWriter out = resp.getWriter();
  28.         out.write(resStr);
  29.         out.flush();
  30.         out.close();
  31.     }
  33.     @Override
  34.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  35.             throws ServletException, IOException {
  36.         doGet(req, resp);
  37.     }
  38. }

json数组的后台响应

  1. package com.ajax;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. @WebServlet("/jsonArr")
  13. public class JsonArr extends HttpServlet {
  15.     /**
  16.      * 
  17.      */
  18.     private static final long serialVersionUID = 1L;
  20.     @Override
  21.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  22.             throws ServletException, IOException {
  23.         // 构造json对象
  24.         String resStr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
  25.         String resStr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002\"" + "}";
  26.         String resStr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003\"" + "}";
  28.         // 构造json数组
  29.         String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";
  31.         // 输出json数组到前台
  32.         PrintWriter out = resp.getWriter();
  33.         out.write(jsonArr);
  34.         out.flush();
  35.         out.close();
  36.     }
  38.     @Override
  39.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  40.             throws ServletException, IOException {
  41.         doGet(req, resp);
  42.     }
  43. }

前台页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Json</title>
  8. </head>
  9. <body>
  10.     <br><br>
  11.     <input type="button" value="JsonStr" οnclick="jsonStr()" />
  12.     <br><br>
  13.     <table>
  14.         <tr>
  15.             <td>username</td>
  16.             <td><input id="username"></td>
  17.         </tr>
  18.         <tr>
  19.             <td>id</td>
  20.             <td><input id="id"></td>
  21.         </tr>
  22.     </table>
  23.     <br><br><br>
  24.     <input type="button" value="JsonArr" οnclick="jsonArr()" />
  25.     <br><br>
  26.     <table border="1" bordercolor="red">
  27.         <caption>Json Array</caption>
  28.         <thead>
  29.             <tr>
  30.                 <th>Username</th>
  31.                 <th>Id</th>
  32.             </tr>
  33.         </thead>
  34.         <tbody id="tb">
  35.         </tbody>
  36.     </table>
  37. </body>
  38. <script type="text/javascript">
  39.     // json字符串处理方法
  40.     function jsonStr() {
  41.         var xhr = new XMLHttpRequest();
  42.         xhr.open("get", "jsonStr");
  43.         xhr.onreadystatechange = function(data) {
  44.             if (xhr.readyState == 4 && xhr.status == 200) {
  45.                 // 将json字符串转换为json对象
  46.                 var obj = eval("(" + data.target.responseText + ")");
  47.                 document.getElementById("username").value = obj.name;
  48.                 document.getElementById("id").value = obj.id;
  49.             }
  50.         };
  51.         xhr.send(null);
  52.     }
  54.     // json数组处理方法
  55.     function jsonArr() {
  56.         var xhr = new XMLHttpRequest();
  57.         xhr.open("get", "jsonArr");
  58.         xhr.onreadystatechange = function(data) {
  59.             if (xhr.readyState == 4 && xhr.status == 200) {
  60.                 // 将json字符串转换为json数组
  61.                 var obj = eval("(" + data.target.responseText + ")");
  63.                 // 创建代码片段，用于存放表格行
  64.                 var oFragment = document.createDocumentFragment();
  66.                 // 根据json数组长度，产生行数据
  67.                 for (var i=0; i<obj.length; i++) {
  68.                     var trObj = document.createElement("tr");
  69.                     trObj.innerHTML = "<td>" + obj[i].name + "</td><td>" + obj[i].id + "</td>";
  70.                     oFragment.appendChild(trObj);
  71.                 }
  73.                 // 将行数据添加在表格的tBody部分
  74.                 document.getElementById("tb").appendChild(oFragment);
  75.             }
  76.         };
  77.         xhr.send(null);
  78.     }
  79. </script>
  80. </html>

页面效果图

SouthEast

点击 JsonStr 和 JsonArr 按钮后的效果

SouthEast 1

好了，整理完毕，示例仅供学习。

  1.    对了，有一点疑惑，之前回调函数中，获取响应数据的时候，都是直接通过data.responseText 来获取的，今天的代码中必须使用data.target.responseText，不知道为什么？有知道的朋友烦请告知一声，非常感谢。

发表评论

表情：
评论列表 （有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读