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

时间:2023-03-09 19:13:47
ajax与servlet交互(通过JSON),JAVA的arraylist传到前端的方法

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

直接上代码吧。

1.JSP代码(test.jsp),需要下载jQuery,下载地址,把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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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" onclick="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,下载地址,并放在项目的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();
} }

运行结果图:

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

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

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