用servlet将后台的数据传输给前台并用ajax接收

前端部分：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.m

扶夙

2187人浏览 · 2022-01-21 20:00:04

扶夙 · 2022-01-21 20:00:04 发布

前端部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body onload="get()">
<div id="inf">
</div>

</body>
<script type="text/javascript">
function get(){
$.ajax({
url:"http://localhost:8080/MyServlet/SearchServlet",
data:{},
type:"get",
success:function(value){
console.log(value);
ViewList(value);
	}
});

}
//创建一个表格，里边存入有后台传输过来的消息，并在div中打印出来
function ViewList(value){
console.log(value);
var html = '<table style="border:1px, solid #000;width:300px;height:20px;">';
for(var i = 0;i<value.length;i++){
html += '<tr>';
html += '<td style="border:1px solid #000;width:30px;height:20px;" id="td_type">'+ value[i].id + '</td>';
html += '<td style="border:1px solid #000;width:30px;height:20px;" id="td_type">'+ value[i].height + '</td>';
html += '<td style="border:1px solid #000;width:60px;height:20px;" id="td_type">'+ value[i].name + '</td>';
html += '<td style="border:1px solid #000;width:30px;height:20px;" id="td_type">'+ value[i].age + '</td>';
html += '<td style="border:1px solid #000;width:135px;height:20px;">';
html += '<input style="border:1px solid #000;width:40px;height:20px;" id="td_type" type="submit" value="修改" οnclick="update(' + value[i].id + ')"/>';
html += '<input style="border:1px solid #000;width:40px;height:20px;" id="td_type" type="submit" value="删除" οnclick="del(' + value[i].id + ')"/>';
html += '</td>';
html += '</tr>';
}
html += '</table>';
$("#inf").empty().append(html);
}
function update(id){
alert(id);
}
function del(id){
alert(id);
}
function list(value){
}
</script>
</html>

servlet部分：

package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
Servlet implementation class SearchServlet
*/
@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;/**
@see HttpServlet#HttpServlet()
*/
public SearchServlet() {
super();
// TODO Auto-generated constructor stub
}/**
@see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设定字符集，防止前后交互出现乱码
response.setContentType("text/json;charset=utf-8");
response.setCharacterEncoding("utf-8");

String json = "[\r\n" +
"	{"id":1,"name":"张三","height":"180","age":"60"},\r\n" +
"	{"id":2,"name":"李四","height":"180","age":"60"},\r\n" +
"	{"id":3,"name":"王五","height":"180","age":"60"},\r\n" +
"	{"id":4,"name":"李留","height":"180","age":"60"}\r\n" +
"\r\n" +
"]";

System.out.println(json);
response.getWriter().append(json);
}/**
@see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}