批量删除前端参数传递及后台接收

批量删除,前台参数传递及后台参数接收

  后台采用数组接收

    例子情景:模拟批量删除用户

    思路:删除用户,每一个复选框的Value值都代表一个用户的ID,获取每一个选中的复选框的值,放入数组,然后直接

       传递给后台,在不知道一共有多少个复选框的时候,使用jQuery来实现

          var userIdList = new Array();//存放相应的用户Id

       //给每一个选中的标签都绑定一个方法

          $("input:checked").each(function(){

       //将标签的值放入数组中

           userIds.push($(this).val());//此处添加不能使用add add不是一个function
         });

   

选择□ 姓名 电话
何二 123
张三 123
李四 123
王五 123
赵六 123

    

    后台接收

        @RequestMapping(value="/reduceUser",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")

        @ResponseBody
        public Result deleteUser( @RequestParam("userIds[ ]")Integer [ ] userIds){
          List<Integer> userIdList = Arrays.asList(userIds);
          int num = this.userService.removeUser(userIdList);
          if(num==1){
            return new Result(200);
          }else{
            return new Result(400);
          }
        }

    前台页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户的批量删除</title>
        <style type="text/css">
            td{
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="jquery/jquery-3.2.1.js" ></script>
        <script type="text/javascript" src="jquery/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">

                //用来全选和取消全部选择
                function changeStatus(){
                    //获取第一行 (选择两字旁边 的那个复选框的状态)
                    var flag = $("#cheooseBox").is(":checked");
                    $("input").attr("checked",flag);
                }
                //$("input[name=‘input1‘]").click(function(){
                $(function(){
                    //给提交的button绑定点击事件
                    $("button").click(function(){
                        // checkedNum  = $("input[name=‘uname‘]:checked").length;
                        var checkedNum  = $("input:checked").length;
                        if(confirm("确定删除所选项?")){
                            var userIds = new Array();
                            //给每一个选中的标签都绑定一个方法
                            //$("input[name=‘uname‘]:checked").each(function(){
                            $("input:checked").each(function(){
                                //将标签的值放入数组中
                                userIds.push($(this).val());//此处添加不能使用add  add不是一个function
                            });
                            /*    也可以直接使用用jQuery发送异步请求
                                $.post("user/reduceUser",{userIds:userIds},function(data){
                                if(data.status==200){
                                    //删除成功
                                    if(confirm("恭喜你删除成功!点击确认刷新页面")){
                                        //删除成功直接从新发送请求,加载页面
                                        $(location).attr("href","user/showUser");
                                    }
                                }
                                },"json");
                            */
                            $.ajax({
                                type:"post",
                                url:"user/reduceUser",
                                data:{"userIds":userIdList},
                                dataType:"json",
                                //traditional:true,
                                success:function(data){
                                    if(data.status==200){
                                        if(confirm("恭喜你删除成功!点击确认刷新页面")){                          // 删除成功后发送请求,刷新页面
                                            $(location).attr("href","user/showUser");
                                            //window.location.href="user/showUser";
                                        }
                                    }
                                }
                            });
                        }
                    });
                });
        </script>
</head>
<body>

    <div class="user-info-form1" align="center">
                <form action="" method="post">
                    <table border="1" cellspacing="0" cellpadding="0" width="300ox" height="450px">
                        <tr>
                            <th>选择
                                <input type="checkbox" id="cheooseBox" value="-1" onclick="changeStatus()" size="7" />
                            </th>
                            <th>姓名</th>
                            <th>电话</th>
                        </tr>
                        <tr>
                            <td><input name="uname1" value="1" type="checkbox"/></td>
                            <td>张三1</td>
                            <td>123</td>
                        </tr>
                        <tr>
                            <td><input name="uname2" value="2" type="checkbox"/></td>
                            <td>张三2</td>
                            <td>123</td>
                        </tr>
                        <tr>
                            <td><input name="uname3" value="3" type="checkbox"/></td>
                            <td>张三3</td>
                            <td>123<
                        </tr>
                        <tr>
                            <td><input name="uname4" value="4" type="checkbox"/></td>
                            <td>张三4</td>
                            <td>123</td>
                        </tr>
                        <tr>
                            <td><input name="uname5" value="5" type="checkbox"/></td>
                            <td>张三5</td>
                            <td>123</td>
                        </tr>
                    </table>
                    <button style="width:90px;height:50px">提交</button>
                </form>
            </div>
</body>
</html>

    

  

时间: 2024-11-09 03:47:04

批量删除前端参数传递及后台接收的相关文章

关于mui前端传值,springboot后台接收值的问题

最近做app,使用mui的ajax给后台传参,后台一直接收不到值,表示很蛋疼.这里通过网上搜索加上个人实践,总结归纳了三种前端传值和后台接收的方式. 第一种: 前端: data: JSON.stringify({username: 'username',password: 'password'}),       headers: {'Content-Type': 'application/json'} 后台: public String test1(@RequestBody Map<String

thinkphp批量删除的实现

今天自己在写后台的时候需要把以前上传的测试文章全部删除掉,但是利用 [操作]里面的一个个删除比较慢,因此想出一个批量删除的解决方案. 首先在前端页面里面建立一个表单,这个表单是把你选中的单选按钮提交到控制器的操作函数 <form action="__URL__/deleteSelected" method="post"></form> 批量删除前端用了一个js 的简单验证 <a href="#" onclick=&q

完整地mybatis + springmvc用checkbox实现批量删除

因为自己在网上找了半天,都找不到完整地代码(脑袋笨,不会变通到自己项目里),所以在这里记下了近乎完整的代码 前端代码 <span style="cursor:pointer;" class="delete"><a class="del-myBlog" onclick="delMyBlog()">删除选中</a></span>  //前端代码 +'<td width=&quo

删除功能的实现(单个删除与批量删除)

2.1学生信息删除的实现 因为实体类已经编写好,所以不需要再编写实体类 a.在现有的student_list.html页面创建一个删除按钮,并在Javascript中编写删除方法 该删除是根据ID一个个删除,并非批量删除,因此点击删除按钮的时候会得到该行ID并传给该方法 b.编写子控制器getwaybeans.xml 新加一个关于删除的action c.编写对应的bean类方法 在现有的studentbean类中新建一个删除方法,该方法名为getwaybeans.xml文件中name属性 值得注

JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能

1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建datagrid(掌握) 2.实现取派员分页查询 n 调整页面基于datagrid发送ajax请求 n 创建PageBean封装分页参数 n 定义通用分页查询方法 n 将分页查询结果转为json返回 3.取派员批量删除 n 页面调整 n 服务端实现 4.取派员修改 n 页面调整 n 服务端实现 2 data

删除JS前台校验,后台批量删除

1.功能需求 在一个数据表格中,选中欲删除的记录,点击删除按钮,先触发前台验证,然后调用后台处理逻辑 2.代码实现 HTML代码: <asp:Repeater ID="repInputList" runat="server" DataSourceID="InputsDataSource" EnableViewState="true" > <HeaderTemplate> <table cellpa

关于前端传参数,后台接收的问题

1.通过ajax,示例: 传给后台的数据通过json封装起来,再用ajax将json传到后台,ajax是用到Jquery的ajax,在jsp先加入Jquery的引用 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> js传值的方法如下 function testAjax() { var users=[{ name:'张三', age:'21', birt

Ado.net[登录,增删改查,Get传值,全选,不选,批量删除,批量更新,添加]

[虽然说,开发的时候,我们可以使用各种框架,ado.net作为底层的东西,作为一个合格的程序员,在出问题的时候我们还是要知道如何调试] 一.增删改查 cmd.ExecuteReader();执行查询,所有sql语句的查询都用这个方法;       cmd.ExecuteNonQuery();执行所有sql语句的增删改都用这个方法; 1 <div> 2 <table> 3 <tr> 4 <td> 用户名:</td> 5 <td> 6 &

vue axios 批量删除 数组参数

方法一:前端循环请求服务器端delete(id)方法 请问如何获得element-ui表格中的勾选项index,以实现批量删除功能 https://segmentfault.com/q/1010000012759131 方法二:传递 string类型字符串.例如: '1,2,3,4' ids =[1,2,3,4] url: '/investigator/submitAll/' + ids, method: 'post' 服务器端接收到: string类型字符串 '1,2,3,4' . 方法三:直