Servlet 中将list集合或数组通过Ajax传到jsp

最新推荐文章于 2024-03-20 23:49:01 发布

Veggiel

最新推荐文章于 2024-03-20 23:49:01 发布

阅读量1w

点赞数 2

分类专栏： java 文章标签： servlet ajax jquery

本文链接：https://blog.csdn.net/veggiel/article/details/52327551

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>