Jquery中Ajax解析List集合和Array数组
需要的jar包:json-lib-2.4-jdk15.jar
1.首先新建一个测试JavaBean:Student.java
public class Student {
private String name;
private int id;
public Student(String name, int id) {
super();
this.name = name;
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
@Override
public String toString() {
return "Student [name=" + name + ", id=" + id + "]";
}
}
2.新建一个Servlet:DataBaseServlet:我这里的dataService.getData();会返回一个List,也可以自己手动添加到list里面去(list.add(new Student(“张三”),20),多加几个用来测试);最重要的地方是将List转化为JSONArray,JSONArray jsonArray = JSONArray.fromObject(dataStudent);然后再传回Ajax;注释部分就是数组的操作,和list集合是一样的
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.DocumentException;
import net.sf.json.JSONArray;
/**
* Servlet implementation class DataBaseServlet
* @param <JSONValue>
*/
public class DataBaseServlet<JSONValue> extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DataBaseServlet(){
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
DataService dataService = new DataService();
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
try {
List dataStudent = dataService.getData();
JSONArray jsonArray = JSONArray.fromObject(dataStudent);
response.getWriter().println(jsonArray);
} catch (DocumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// try {
// Student [] students = dataService.getStudent();
// JSONArray jsonArray = JSONArray.fromObject(students);
// response.getWriter().println(jsonArray);
// } catch (DocumentException e){
// // TODO Auto-generated catch block
// e.printStackTrace();
// }
}
}
3.前段jsp界面:
(1)list集合:使用$.each(data, function(i, list){})来迭代集合
i是从0开始的索引,list是传过来jsonArray的引用;为了方便看到数据的变化,顺便讲一下jquery中延迟执行 var t = setTimeout(function(){}, time);function()里面写需要执行的js代码,后面的参数time是需要延迟的毫秒值;这个方法是异步执行的,所以在循环中需要把参数i*time;
(2)数组:数组中取值是list[i].name;其他和list一样
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="com.*,java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>摇号抽奖</title>
<script type="text/javascript">
$(function() {
$(document).keyup(function(e) {
if (e.keyCode == 32) {
$.ajax({
type : "post",
url : "DataBaseServlet",
dataType : "json",
success : function(data) {
$.each(data, function(i, list) {
var t = setTimeout(function() {
$("#name").val(list.name);
$("#card").val(list.id);
}, i * 100);
})
}
});
}
});
});
</script>
</head>
<body>
姓名:
<input type="text" id="name"> 身份证号:
<input type="text" id="card"><br>
<p>空格键开始</p>
</body>
</html>
4.当然了别忘记在web.xml中配置你的servlet