jsp页面中使用a标签进行删除请求时候使用弹出框确认后再删除

╰半夏微凉° 2022-12-31 05:25 155阅读 0赞

### jsp页面中使用a标签进行删除请求时候使用弹出框确认后再删除 ###

*  一、使用背景
 *  二、核心代码
 *   *  2.1a标签
     *  2.2js代码
 *  三、运行的相关文件
 *   *  3.1common.jsp
     *  3.2index.jsp
     *  3.3业务逻辑

# 一、使用背景 #

初次接触JAVAWEB管理系统时，需要满足需求。  
在jsp页面中对某一对象的修改/删除，使用了a标签进行请求的跳转，但是删除操作需要用户在删除之前，进行再次确认，以防止误删数据。  
使用JSP+Servlet实现商品管理功能，后台为数据库。  
下面是使用了此方法的项目，希望对您有帮助！  
[JAVAWEB使用JSP+Servlet实现商品管理功能，后台为数据库，功能包括商品信息浏览、商品信息详情、商品信息删除及修改。][JAVAWEB_JSP_Servlet]

# 二、核心代码 #

## 2.1a标签 ##

> $\{good.goodsId 是onclick函数中传入的参数id

## 2.2js代码 ##

jsp页面加上该onclick的响应事件  
下面展示一些 `代码片`。

> confirm 是双选框  
> onclick的响应函数中还传递了一个参数param，我使用的是$标签，数据传到函数中还进行了一个字符串的拼接。

显示效果如下：  
![在这里插入图片描述][20201228170150891.png]

# 三、运行的相关文件 #

## 3.1common.jsp ##

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="path" value="${pageContext.request.contextPath}"/>
    <%
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
    %>

## 3.2index.jsp ##

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@include file="/common/common.jsp"%>
    <html>
      <head>
        <title>商品信息管理首页</title>
      </head>
      <style>
        #add{
        
          display: block;
          text-align: center;
        }
      </style>
      <body>
    
      <table align="center" border="1" >
    
        <tr align="center">
          <td>条形码</td>
          <td>主管工号</td>
          <td>商品名称</td>
          <td>商品价格</td>
          <td>进货单号</td>
          <td>保质时间</td>
          <td>编辑</td>
        </tr>
        <c:forEach items="${list}" var="good">
          <tr align="center">
            <td>${
        good.barCode}</td>
            <td>${
        good.chargeNum}</td>
            <td><a href="${path}/GoodServlet?m=details&id=${good.goodsId}">${
        good.goodsName}</a> </td>
            <td>${
        good.goodsPrice}</td>
            <td>${
        good.purchaseId}</td>
            <td>${
        good.expirationDate}</td>
            <td><a href="${path}/GoodServlet?m=updatePage&id=${good.goodsId}">修改</a>  <a href="javascript:void(0)" onclick="confirmDel(${good.goodsId})">删除</a> </td>
          </tr>
        </c:forEach>
      </table>
      <a id="add" href="${path}/GoodServlet?m=insertPage">添加商品</a>
    
      <script type="text/javascript">
        function confirmDel(param)
        {
        
          if(window.confirm("确定删除?")){
        
            document.location="${path}/GoodServlet?m=delete&id="+param
          }
        }
      </script>
    
      </body>
    </html>

显示效果：  
![在这里插入图片描述][20201228170850640.png]

## 3.3业务逻辑 ##

//删除：根据商品的id进行删除，最后，重新获取数据库数据返回首页。
        public void delete (HttpServletRequest req, HttpServletResponse resp)  {
        
            String id = req.getParameter("id");//获取id的值
            boolean del = goodService.del(id);//在数据库删除
            dispatcher("/ListServlet",req,resp);//去ListServlet获取数据
        }

[JAVAWEB_JSP_Servlet]: https://blog.csdn.net/weixin_46460843/article/details/111870729
[20201228170150891.png]: /images/20221120/5a6cb3d4dd2a4b6e9ea1a8354e9415cf.png
[20201228170850640.png]: https://img-blog.csdnimg.cn/20201228170850640.png