为删除数据操作与退出操作添加确认提示框

简介: JS实现为删除数据操作与退出操作添加确认提示框

以删除指定empId的员工为例

一、js方式

1、在jsp界面中,找到删除按钮所在的地方,为其添加超链接javascript:delEmp('${emp.empId'},代表点击删除时调用delEmp函数,并且传入empId的值。

注意:
如果需要传入的值时int类型,则在使用el表达式调用时,外部可以不加单引号。
而如果传入的值时string类型,则需要在其外部加单引号。
在本例中,empId定义为string类型,所以需要加单引号。

在这里插入图片描述

2、在Jsp页面的script代码中创建delEmp(empId)函数。

创建flag变量,当点击是时,执行超链接,跳转到相关servlet程序,并执行删除删除操作。并且将empId传入servlet程序中,令servlet陈新股根据empId删除相应的员工。

在这里插入图片描述

3、完善业务层、servlet代码中的删除操作。

演示:删除empId为‘hhh’的数据。
在这里插入图片描述

删除成功,列表中没有该条数据
在这里插入图片描述

二、Ajax方式

1、定位到删除操作,通过javaScript:void(0)阻断a标签的href属性。使我们单击时,即可触发del()函数,并传入要删除用户的id

在这里插入图片描述

2、通过Ajax,向servlet发送要删除用户的id并接收执行删除操作后servlet通过直接响应发送的值( resp.getWriter().write(“true/false”) )。

如果为true,则提示删除成功,并跳转到用户查询的界面。故编写删除方法时,应当先编写用户查询的方法。
<script type="text/javascript">
//判断用户选择是否发起ajax请求进行用户信息删除
function del(uid){
    if(confirm("您确定要删除吗?")){
        $.ajax({
        type:"get",//请求方式
        url:"data?method=delUserInfo",//servlet上具体方法的路径
        data:"uid="+uid,//请求响应的参数
        success:function(data){//函数方法
        if(eval(data)){//判断是true还是false
            alert("删除成功");
            window.location.href="data?method=selUserInfo";
            }
        }
        
        })
    }
}
</script>

3、完善业务层、servlet代码中的删除操作。

点击删除
在这里插入图片描述
删除成功并且点击确认后页面自动刷新
在这里插入图片描述
在这里插入图片描述

ps: 如果没有值的传递可以考虑直接为href添加id(但有值传递只能采取前面的方式),然后通过jquery实现,举例如下。

以用户退出为例

1、添加id属性

在这里插入图片描述

2、通过jquery添加相应的函数

在这里插入图片描述

相关文章
|
机器学习/深度学习 人工智能 算法
搞懂大模型的智能基因,RLHF系统设计关键问答
搞懂大模型的智能基因,RLHF系统设计关键问答
427 0
|
SQL 缓存 Java
SpringBoot系列教程JPA之update使用姿势
上面两篇博文拉开了jpa使用姿势的面纱一角,接下来我们继续往下扯,数据插入db之后,并不是说就一层不变了,就好比我在银行开了户,当然是准备往里面存钱了,有存就有取(特别是当下银行利率这么低还不如买比特币屯着,截止19年6月22日,btc已经突破1.1w$,可惜没钱买😭)这就是我们今天的主题,数据更新--update的使用姿势
1330 0
SpringBoot系列教程JPA之update使用姿势
|
Java 应用服务中间件 Android开发
Eclipse创建Spring项目
本文介绍了在Eclipse中创建Spring项目的步骤,包括如何配置Tomcat服务器、创建项目、部署项目到Tomcat以及添加Spring框架所需的JAR包。
353 1
Eclipse创建Spring项目
|
Oracle Java 关系型数据库
[学习笔记] 在Eclipse中使用Hibernate,并创建第一个Demo工程,数据库为Oracle XE
[学习笔记] 在Eclipse中使用Hibernate,并创建第一个Demo工程,数据库为Oracle XE
|
自然语言处理 Java Apache
Java中的自然语言处理应用
Java中的自然语言处理应用
|
NoSQL Java API
Spring Data MongoDB 使用
Spring Data MongoDB 使用
699 1
|
运维 Devops jenkins
自动化运维:打造高效DevOps流水线
【8月更文挑战第44天】本文将通过深入浅出的方式,带你构建一个自动化的DevOps流水线,提升开发和部署效率。从基础概念到实际操作,我们一步步剖析如何实现代码提交、自动测试、构建、部署的全过程自动化。你将学会使用Jenkins、Git、Docker等工具,并结合Shell脚本编写,完成一个完整的自动化流程。文章末尾附有完整的示例代码,助你快速上手实践。
|
存储 缓存 自然语言处理
深入PHP内核:理解OPcache的工作原理与优化实践
【5月更文挑战第6天】 在现代Web开发中,提升性能和响应速度是持续追求的目标。PHP作为一种广泛使用的服务端脚本语言,其执行效率至关重要。本文将深入探索PHP的OPcache(优化器缓存)组件,解析其如何改善PHP的性能表现。通过剖析OPcache的工作机制,我们将讨论有效的配置策略以及实践中的最佳优化方法,旨在帮助开发者充分理解并利用OPcache来提升应用性能。
|
Unix Linux Shell
振南技术干货集:各大平台串口调试软件大赏(3)
振南技术干货集:各大平台串口调试软件大赏(3)
|
存储 分布式计算 Hadoop
【Hadoop】Hadoop的三种集群模式
【4月更文挑战第9天】【Hadoop】Hadoop的三种集群模式