1、选中要删除的学生信息

2、点击 删除选中 按钮，把复选框中的值取出提交到后台

3、后台获取选中的id

4、前端也跟着删除数据

示例代码：

前端代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>学生信息列表</h1>

<input type="button" id="del" value="删除选中">
//表格外面加一个form表单包括table,为了序列化表单
//里面不需要添加method..就给一个id就行了

<form id="f">

    <table border="1" id="tab">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

            <th>班级</th>

            <th>全选<input type="checkbox" id="selects"></th>

        </tr>

    </table>

</form>

</body>

<script src="js/jquery-1.12.4.js"></script>

<script>

    //页面加载时初始化数据（数据库读取数据）

    $(function () {

        $.ajax("stu",{

            type:"post",

            success:function (data) {

                //后台响应回来 json 格式的数据

                //循环遍历学生信息列表

                $.each(data,function (index,obj) {

                    $("#tab").append(

                        "<tr>"+

                            "<td>"+obj.sid+"</td>"+

                            "<td>"+obj.sname+"</td>"+

                            "<td>"+obj.ssex+"</td>"+

                            "<td>"+obj.sage+"</td>"+

                            "<td>"+obj.clazz.cname+"</td>"+

                            // 注意！！！  在input里面需要 添加name，为了后台读取选中的值  req.getParameterValues("stuId");

                            "<td class='box'><input type='checkbox' name='stuId' value='"+obj.sid+"'></td>"+

                        "</tr>"

                    );

                });

                //全选/全不选

                var i=0;

                $("#selects").on("click",function () {

                    if(i==0){

                        $("#tab :checkbox").prop("checked",true);

                        i=1;

                    }else{

                        $("#tab :checkbox").prop("checked",false);

                        i=0;

                    }

                })

                //删除

                $('#del').on("click",function () {

                    //取出表单序列化的值

                    var param=$('#f').serialize();

                    //用ajax提交序列化的值

                    $.get("dels",param,function (data) {

                        if(data==200){

                            //如果在后台返回来200数字表示后台在数据库已经删除成功

                            //后台删除成功之后前端用jQuery也随之删除对应的节点,为了不用重新再查询一遍数据

                            $(".box :checked").parent().parent().remove();

                        }else{

                            alert("删除失败！");

                        }

                    })

                    /*

                   * 也可以这种方式提交

                   * $.ajax("dels",{

                           type: 'get',

                           data: $("#f").serialize(),

                           success: function(data) {

                               // your code ...

                           }

                       });

                   * */

                });

            }

        });

    })

</script>

</html>

后台代码：（只附上删除的Servlet代码）

@WebServlet("/dels")

public class DeleteServlet extends HttpServlet {

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //取出提交过来表单选中序列化的值 name都为stuId的

        //取出来是一个String[]数组

        String[] sids=req.getParameterValues("stuId");

        for (String str:sids) {

            System.out.println("获取id"+str);

        }

        //实例化dao方法

        StudentDao dao =new StudentDao();

        //调用删除的方法 返回int[]数组

        int[] row=dao.studelete(sids);

        //只需判断有没有数据即可，有就响应200表示成功后台删除成功，否则500删除失败

        resp.getWriter().println(row!=null?200:500);

    }

}

jQuery ajax()使用serialize()提交form数据到后台的更多相关文章

  1. jQuery ajax()使用serialize()提交form数据

    jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化 <form action="&q ...

  2. $.ajax()使用serialize()提交form数据

    jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=" ...

  3. 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

    <input type="hidden" id="url" value="index.php"/> <form id=&q ...

  4. 通过jQuery的Ajax方式来提交Form表单

    通过jQuery的Ajax方式来提交Form表单 $.ajax({ url:ajaxCallUrl, type:"POST", cache:true, async:false, d ...

  5. jQuery ajax中serialize()方法增加其他参数

    表单提交 使用jQuery.ajax()进行表单提交时,需要传递参数,最直接的方法便是使用Form的serializa()将表单序列化,前提只是将Form表单中的name属性与数据库的字段名保持一致便 ...

  6. Jquery ajax中表单提交被拦截的问题处理方法

    在实际开发项目中,由于要做支付宝的批量退款处理,需要用到ajax中去提交表单数据,项目截图如下: 由于在第二张截图“确认退款”那里需要异步ajax提交数据到服务器处理信息,处理成功后将返回的数据装载到 ...

  7. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  8. 导出excel用ajax不行，提交form表单可以

    导出excel用ajax不行,提交form表单可以. 一直用ajax找原因,网页不出现下载提示框 写了 response.setContentType("application/binary ...

  9. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

随机推荐

  1. 【原创】VirtualBox 磁盘扩容教程

    问题和环境说明 环境: 主机:Ubuntu 15.10 客户机:Windows 7 x64 VirtualBox:5.0.10 虚拟机磁盘类型:VDI(VirtualBox磁盘映像) 问题: 在虚拟机 ...

  2. 搭建企业级PPTP服务器

    本文收录在企业项目实战系列 一.VPN 介绍 1.介绍 虚拟私人网络(英语:Virtual Private Network,缩写为VPN)是一种常用于连接中.大型企业或团体与团体间的私人网络的通讯方法 ...

  3. python字典类型

    字典类型简介 字典(dict)是存储key/value数据的容器,也就是所谓的map.hash.关联数组.无论是什么称呼,都是键值对存储的方式. 在python中,dict类型使用大括号包围: D = ...

  4. Python丢弃返回值

    函数多个返回值 python的函数支持返回多个值.返回多个值时,默认以tuple的方式返回. 例如,下面两个函数的定义是完全等价的. def f(): return 1,2 def f(): retu ...

  5. shell编程基础(三): 位置参数与shell脚本的输入输出

    一.位置参数和特殊变量 有很多特殊变量是被Shell自动赋值的,我们已经遇到了$?和$1,现在总结一下: 常用的位置参数和特殊变量: $0 相当于C语言main函数的argv[0] $1.$2... ...

  6. 关于Android屏幕的参数

    屏幕尺寸信息: 级别 对应Drawable dp尺寸 Layout 文件夹 案例 标注 small drawable-ldpi 426x320 dp layout-small 典型 (240x320 ...

  7. [转]How To Send Transactional Email In A NodeJS App Using The Mailgun API

    https://www.npmjs.com/package/mailgun-js 本文转自:https://www.mailgun.com/blog/how-to-send-transactional ...

  8. 【微服务No.1】Consul服务发现在windows下简单使用

    基本介绍: 安装: 下载地址:https://www.consul.io/downloads.html 运行: consul agent -dev 显示这个界面说明已经开启成功. 页面显示: 然后访问 ...

  9. asp.net-缓存技术-20180409

    asp.net缓存技术有三种 1.页面输出缓存 2.页面部分缓存 3.页面数据缓存 ---------------------------------------------------------- ...

  10. 【Java深入研究】10、红黑树

    一.红黑树介绍 红黑树是二叉查找树,红黑树的时间复杂度为: O(lgn) 红黑树的特性:(1)每个节点或者是黑色,或者是红色.(2)根节点是黑色.(3)每个叶子节点(NIL)是黑色. [注意:这里叶子 ...