关于ajax是javaEE中最基本的操作：
下面是这道题：
基本功能： jsp+servlet+ajax实现用户信息查询，实现无刷新删除
用户信息包括
| 学号 | 姓名 | 出生日期 | 性别 | 操作 |
| 20170101 | 张三 | 1996-10-03 | 男 | 删除 |
| ……. | …… | …… | ….. | 删除 |
要求：1）通过ajax 加载数据，json实现
2）实现异步删除，删除时不刷新整个页面
3）通过sql语句建表
这里数据库可以用MySQL，建表这里就先省略了
a.前台js页面
<%@ 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>
<%
String path=request.getContextPath();
request.setAttribute("path", path);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${path}/js/jquery.1.9.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"${path}/UserServlet",
data:{},
type:"get",
datatype:"json",
success:function(data){
//alert(data);
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" οnclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
});
function del(){
var cbox =document.getElementsByName("chec");
for(var i=0;i<cbox.length;i++){
if(cbox[i].checked){
var id =cbox[i].value;
$.ajax({
url:"${path}/deleteServlet",
data:{"id":id},
type:"get",
datatype:"json",
success:function(data){
//alert("删除成功！");
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
table.empty();
table.append("<tr><td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td></tr>");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" οnclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
}
}
}
</script>
</head>
<body>
<table border="1" id="mytable">
<tr>
<td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td>
</tr>
</table>
</body>
</html>b.两个后台页面：
1 UserServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 javax.servlet.http.HttpSession;
import com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
UserService service= new UserServiceImpl();
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2.deleteServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class deleteServlet
*/
@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public deleteServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String ida =request.getParameter("id");
int id = Integer.parseInt(ida);
UserService service= new UserServiceImpl();
int result=service.deleteByid(id);
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @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);
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
