javaWeb使用ajax实现动态删除
1、编写login.jsp
<body>
<form name="login" method="post" action="servlet/LoginServlet">
用户名：<input type="text" name="userName"></input>
密码：<input type="password" name="pwd"/>
<input type="submit" value="提交"/>
</form>
</body>
2、编写LoginServlet
1.web.xml配置
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>cn.com.test.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/servlet/LoginServlet</url-pattern>
</servlet-mapping>
2.LoginServlet关键代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String userName=request.getParameter("userName");
String pwd=request.getParameter("pwd");
if(userName.equals("admin") && pwd.equals("admin")){
StudentDao stuDao=new StudentDao();
List<Student> stuList=stuDao.findAllStudent();
request.setAttribute("stuList", stuList);
request.getRequestDispatcher("/OperatorStudent.jsp").forward(request, response);
}
}
3、OperatorStudent.jsp编写
<head>
<script type="text/javascript" src="/test/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function OperatorUser(id) {
$.ajax({
type : "post",
url : "DelStudent",
dateType : "text",
data : {
id : id
},
success : function(data) {
$("#tr_"+id.substring(4)).remove();
alert("操作成功！");
},
error : function() {
alert("网络异常，请稍后重试");
}
});
}
</script>
<title>My JSP 'OperatorStudent.jsp' starting 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">
-->
</head>
<body>
<h3>学生信息</h3>
<hr>
<table border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>操作</td>
</tr>
<%
List stuList = (List) request.getAttribute("stuList");
if (stuList != null && stuList.size() > 0) {
for (int i = 0; i < stuList.size(); i++) {
Student stu = (Student) stuList.get(i);
%>
<tr id="tr_<%=stu.getId()%>">
<td><%=stu.getId()%></td>
<td><%=stu.getUserName()%></td>
<td><%=stu.getAge()%></td>
<td><%=stu.getAddress()%></td>
<td><input type="button" id="del_<%=stu.getId()%>" value="删除"
onclick="OperatorUser(this.id)"> <input type="button"
id="upd_<%=stu.getId()%>" value="更新"></td>
</tr>
<%
}
}
%>
</table>
</body>
</html>
4、编写DelStudent
web.xml配置：
<servlet>
<servlet-name>DelStudent</servlet-name>
<servlet-class>cn.com.test.servlet.DelStudent</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DelStudent</servlet-name>
<url-pattern>/servlet/DelStudent</url-pattern>
</servlet-mapping>
代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
if (id.substring(0, 4).equals("del_")) {
int stuId = Integer.parseInt(id.substring(4));
StudentDao stuDao = new StudentDao();
int result = stuDao.deleteUserById(stuId);
if (result > 0) {
List<Student> stuList = stuDao.findAllStudent();
request.setAttribute("stuList", stuList);
request.getRequestDispatcher("/OperatorStudent.jsp").forward(
request, response);
}
} else {
}
}
5、实体类Student
public class Student {
private int id;
private String userName;
private int age;
private String address;
//getter setter...
6、链接数据库，关闭数据库的操作
public class BaseDao {
private final static String Driver="com.mysql.jdbc.Driver.class";
//数据库连接字符串
private final static String URL="jdbc:mysql://localhost:3306/test1";
//数据库登录用户名
private final static String USERNAME = "root";
//登录密码
private final static String PASSWORD = "root";
protected Connection con=null;
protected PreparedStatement pstm = null;
protected ResultSet rs =null;
String sql =null;
/**
* 获得数据库连接
* @return 数据库连接对象
*/
public Connection getConnection(){
try {
//加载驱动
Class.forName("com.mysql.jdbc.Driver");
//获得数据库连接
con = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return con;
}
//释放数据库资源
public void closeConnection(){
try{
if(rs!=null){
rs.close();
}
if(pstm !=null){
pstm.close();
}
if(con!=null && con.isClosed()==false){
con.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
}
7、对数据的查询及删除
//查询学生信息
public List<Student> findAllStudent(){
List<Student> studentList=new ArrayList();
String sql="select * from student";
try{
con=super.getConnection();
pstm=con.prepareStatement(sql);
rs=pstm.executeQuery();
while(rs.next()){
Student stu=new Student();
stu.setId(rs.getInt("id"));
stu.setUserName(rs.getString("userName"));
stu.setAge(rs.getInt("age"));
stu.setAddress(rs.getString("address"));
studentList.add(stu);
}
}catch(Exception e){
e.printStackTrace();
}
finally{
super.closeConnection();
}
return studentList;
}
//删除信息
public int deleteUserById(int id){
int result=0;
String sql="delete from student where id=?";
try{
con=super.getConnection();
pstm=con.prepareStatement(sql);
pstm.setInt(1,id);
result=pstm.executeUpdate();
}catch(Exception e){
e.printStackTrace();
}
finally{
super.closeConnection();
}
return result;
}