ajax与servlet交互（通过JSON）,JAVA的arraylist传到前端的方法

末蓝、 2022-06-15 06:21 183阅读 0赞

所实现的效果：首先从前端（ajax）传参数给servlet，然后servlet经过处理，把arraylist类型的参数以JSON字符串的形式返回给前端（ajax），然后前端经过解析，把JSON字符串解析为JS数组。

直接上代码吧。

1.JSP代码(test.jsp)，需要下载jQuery，[下载地址][Link 1]，把jQuery路径也修改一下：

<%@page import="java.util.ArrayList"%>
    <%@ 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>
        <title>test page</title>
    
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        
            <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
            <script type="text/javascript">
        function upload(){
            $.ajax({
                type: "POST",
                url: "TestServlet",
                data: $('#form').serialize(),
                success: function(data){            	
                        alert("传回来的JSON字符串："+data);
                        var arraydata = eval(data);
                        alert("前端解析JSON字符串之后的数组："+arraydata);
                }
            })
        }
        </script>
    </head>
    
    <body>
        <form id="form">
            UserName:<input type="text" name="username" id="username">
            PassWord:<input type="password" name="password" id="password">
            <button type="button" οnclick="upload()">提交</button>
        </form>
    
    </body>
    </html>

2.javabean代码（User.java）：

package com.test;
    
    public class User {
        private String username;
        private String password;
    
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
        public String getPassword() {
            return password;
        }
        public void setPassword(String password) {
            this.password = password;
        }
    }

3.servlet代码（TestServlet.java），需要GSON.jar， [下载地址][Link 2]，并放在项目的WEB-INF/lib下面：

package com.test;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.jws.soap.SOAPBinding.Use;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.util.ArrayList;
    
    import com.test.User;
    //import com.beans.AerialPhotographBean;
    import com.google.gson.Gson;
    
    @WebServlet("/TestServlet")
    public class TestServlet extends HttpServlet {
    
        public TestServlet() {
            super();
        }
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            doPost(request, response);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            response.setContentType("text/html");
            PrintWriter out = response.getWriter();
            String username=request.getParameter("username");
            String password=request.getParameter("password");
    
            System.out.println("UserName:"+username+";"+"PassWord:"+password);
    
            Gson gson=new Gson();
            ArrayList<User> arraylistUsers = new ArrayList<User>();
            User user1=new User();
            user1.setUsername(username);
            user1.setPassword(password);
            
            User user2=new User();
            user2.setUsername(username);
            user2.setPassword(password);
            
            arraylistUsers.add(user1);
            arraylistUsers.add(user2);
    
    
            
            String info=gson.toJson(arraylistUsers);
            System.out.println(info);
            
            out.write(info);
    //        out.print("success");
    //        out.flush();
    //        out.close();
        }
    
    }

运行结果图：

![Center][]

![Center 1][]

![Center 2][]

[Link 1]: http://download.csdn.net/detail/u012130706/9852622
[Link 2]: http://download.csdn.net/detail/u012130706/9852623
[Center]: /images/20220615/3fe1e0d479de4eedbf2e053f75e05d2b.png
[Center 1]: /images/20220615/54c25a2fad6842e9b2ee75d236bc1ea1.png
[Center 2]: /images/20220615/1cea144b354d47a693c4f3ee435c4488.png