用ajax 刪除使用者非同步重新整理
阿新 • • 發佈：2019-01-29
1.ajax學習
主要程式碼：
ajax <script type="text/javascript"src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function deleteUserByid(userid,obj)
{
$.post("DeleteUser",{userid:userid},function(data)
{
if("刪除成功" == data)
{
alert(data);
$(obj).parent().parent().remove();
}
else
alert(data);
});
}
</script>
這裡就不寫實體類，dao類和連線資料庫的具體步驟了
servlet：DeleteUser
Html:package com.jkx.web.servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.jkx.dao.UserDao; import com.jkx.po.User; public class DeleteUser extends HttpServlet { 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"); response.setCharacterEncoding("utf-8"); PrintWriter out =response.getWriter(); UserDao userdao=UserDao.getIntance(); int userid=Integer.parseInt(request.getParameter("userid")); try { if(userdao.deleteUserById(userid)) { out.print("刪除成功"); } else out.print("刪除失敗"); } catch (SQLException e) { e.printStackTrace(); } } }
<%@page import="com.jkx.po.User"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'fail.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"> --> <script type="text/javascript"src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> function deleteUserByid(userid,obj) { $.post("DeleteUser",{userid:userid},function(data) { if("刪除成功" == data) { alert(data); $(obj).parent().parent().remove(); } else alert(data); }); } </script> </head> <body> ${user}歡迎登入 <hr> <center> <div> <form action="QueryUserName" method="post" onsubmit="return findUserByName(${user },this)"> 使用者名稱：<input type="text" name="username"> <input type="hidden" name="user" value="${user }"> <input type="submit" value="查詢" > </form> <a href="InsertUser.jsp?username=${user }">新增使用者</a> <table border="1"> <tr> <td>使用者id</td> <td>使用者名稱</td> <td>使用者密碼</td> <td>使用者性別</td> <td>使用者備註</td> <td>操作</td> </tr> <c:forEach var="user" items="${userlist }"> <tr id="t_tr"> <td>${user.userid }</td> <td>${user.username }</td> <td>${user.password }</td> <td>${user.sex==1?"man":"woman"}</td> <td>${user.flag }</td> <td><a href="Javascript:void(0)" onclick="deleteUserByid(${user.userid },this)">刪除</a> <a href="QueryForUpdate?userid=${user.userid }&username=${user.username}">修改</a></td> </tr> </c:forEach> </table> </div> </center> <hr> </body> </html>