最近上班太忙，晚上抽空整理一下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
点击 jsonstr 和 jsonarr 按钮后的效果
好了，整理完毕，示例仅供学习。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax如何实现城市二级联动
ajax跨域请求jsonp获取json数据步骤详解（附代码）
以上就是ajax响应json字符串和json数组的方法的详细内容。