下面我就为大家带来一篇ajax响应json字符串和json数组的实例。现在就分享给大家，也给大家做个参考。
最近上班太忙，晚上抽空整理一下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>
页面效果图
点击 jsonstr 和 jsonarr 按钮后的效果
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
ajax同步和异步问题浅析及解决方法
ajax解决多余刷新的两种方法
ajaxsubmit()提交file文件
以上就是ajax响应json字符串和json数组的实例（图文教程）的详细内容。