ajax 删除用户异步刷新

最新推荐文章于 2024-05-25 09:36:49 发布

原创最新推荐文章于 2024-05-25 09:36:49 发布 · 641 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#异步 #myeclipse #servlet #ajax #java

代码专栏收录该内容

29 篇文章

订阅专栏

这篇博客介绍了如何在网页中通过Ajax实现用户删除操作，点击删除链接触发Ajax请求，发送用户ID到Servlet进行处理，整个过程为异步，无需刷新整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX即“ A synchronous J avascript And X ML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和 XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

html <a href="Javascript:void(0)" onclick="deleteUserByid(${user.userid },this)">删除</a>

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>

在此只展示servlet页面和前端页面

DeleteUser

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();
		}
	}

}

success。jsp

<%@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 'success.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>