ajax响应json字符串和json数组的实例(详解)

程序员文章站 2022-07-05 19:34:25

最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。直接看代码。 json字符串的后台响应 pac...

最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。

直接看代码。

json字符串的后台响应

package com.ajax;

import java.io.ioexception;
import java.io.printwriter;

import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;

@webservlet("/jsonstr")
public class jsonstr extends httpservlet {

 /**
 * 
 */
 private static final long serialversionuid = 1l;

 @override
 protected void doget(httpservletrequest req, httpservletresponse resp)
  throws servletexception, ioexception {
 // 构造json对象
 string resstr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 
 // 输出json对象到前台
 printwriter out = resp.getwriter();
 out.write(resstr);
 out.flush();
 out.close();
 }

 @override
 protected void dopost(httpservletrequest req, httpservletresponse resp)
  throws servletexception, ioexception {
 doget(req, resp);
 }
}

json数组的后台响应

package com.ajax;

import java.io.ioexception;
import java.io.printwriter;

import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;

@webservlet("/jsonarr")
public class jsonarr extends httpservlet {

 /**
 * 
 */
 private static final long serialversionuid = 1l;

 @override
 protected void doget(httpservletrequest req, httpservletresponse resp)
  throws servletexception, ioexception {
 // 构造json对象
 string resstr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 string resstr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002\"" + "}";
 string resstr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003\"" + "}";
 
 // 构造json数组
 string jsonarr = "[" + resstr1 + "," + resstr2 + "," + resstr3 + "]";
 
 // 输出json数组到前台
 printwriter out = resp.getwriter();
 out.write(jsonarr);
 out.flush();
 out.close();
 }

 @override
 protected void dopost(httpservletrequest req, httpservletresponse resp)
  throws servletexception, ioexception {
 doget(req, resp);
 }
}

前台页面

<%@ 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>json</title>
</head>
<body>
 <br><br>
 <input type="button" value="jsonstr" onclick="jsonstr()" />
 <br><br>
 <table>
 <tr>
  <td>username</td>
  <td><input id="username"></td>
 </tr>
 <tr>
  <td>id</td>
  <td><input id="id"></td>
 </tr>
 </table>
 <br><br><br>
 <input type="button" value="jsonarr" onclick="jsonarr()" />
 <br><br>
 <table border="1" bordercolor="red">
 <caption>json array</caption>
 <thead>
  <tr>
  <th>username</th>
  <th>id</th>
  </tr>
 </thead>
 <tbody id="tb">
 </tbody>
 </table>
</body>
<script type="text/javascript">
 // json字符串处理方法
 function jsonstr() {
 var xhr = new xmlhttprequest();
 xhr.open("get", "jsonstr");
 xhr.onreadystatechange = function(data) {
  if (xhr.readystate == 4 && xhr.status == 200) {
  // 将json字符串转换为json对象
  var obj = eval("(" + data.target.responsetext + ")");
  document.getelementbyid("username").value = obj.name;
  document.getelementbyid("id").value = obj.id;
  }
 };
 xhr.send(null);
 }
 
 // json数组处理方法
 function jsonarr() {
 var xhr = new xmlhttprequest();
 xhr.open("get", "jsonarr");
 xhr.onreadystatechange = function(data) {
  if (xhr.readystate == 4 && xhr.status == 200) {
  // 将json字符串转换为json数组
  var obj = eval("(" + data.target.responsetext + ")");
  
  // 创建代码片段，用于存放表格行
  var ofragment = document.createdocumentfragment();
  
  // 根据json数组长度，产生行数据
  for (var i=0; i<obj.length; i++) {
   var trobj = document.createelement("tr");
   trobj.innerhtml = "<td>" + obj[i].name + "</td><td>" + obj[i].id + "</td>";
   ofragment.appendchild(trobj);
  }
  
  // 将行数据添加在表格的tbody部分
  document.getelementbyid("tb").appendchild(ofragment);
  }
 };
 xhr.send(null);
 }
</script>
</html>

页面效果图

ajax响应json字符串和json数组的实例(详解)