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. Mybatis学习（五）————— 延迟加载和缓存机制(一级二级缓存)

    一.延迟加载 延迟加载就是懒加载,先去查询主表信息,如果用到从表的数据的话,再去查询从表的信息,也就是如果没用到从表的数据的话,就不查询从表的信息.所以这就是突出了懒这个特点.真是懒啊. Mybati ...

  2. python包导入细节

    包导入格式 导入模块时除了使用模块名进行导入,还可以使用目录名进行导入.例如,在sys.path路径下,有一个dir1/dir2/mod.py模块,那么在任意位置处都可以使用下面这种方式导入这个模块. ...

  3. Linux核心命令

    Linux核心命令 strace(查看系统调用的一个过程) 例:strace cat /test.txt netstat perf top pidstat mpstat dstat vmstat sl ...

  4. YARN集群的mapreduce测试（四）

    将手机用户使用流量的数据进行分组,排序: 测试准备: 首先同步时间,然后master先开启hdfs集群,再开启yarn集群:用jps查看: master上: 先有NameNode.SecondaryN ...

  5. iOS main.m解析

    在iOS开发中,有一个文件main.m,可能并不是很引起开发的注意.不过,可能在面试过程中,面试官还是有些会问到主函数里面到底做了哪些工作和任务.下面我们主要看一下main.m内部的逻辑. #impo ...

  6. 在Fragment中保存WebView状态

    http://www.lucazanini.eu/2013/android/how-to-save-the-state-of-a-webview-inside-a-fragment-of-an-act ...

  7. 【转载】PhpStudy修改Apache的端口号

    phpStudy是一个PHP调试环境的程序集成包.该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...

  8. VB.NET获取系统特殊目录

    For Each x In GetType(System.Environment.SpecialFolder).GetEnumValues Debug.Print("{0} {1}" ...

  9. sping框架纯注解配置

    1.相关注解 ①@Configuration注解-->添加了该注解在类上,就表明该类是spring的配置类.该类的作用是用来替代原来的XML配置文件的. 通过配置类创建容器时,需要使用Annot ...

  10. Android Lifecycle使用

    引言 Lifecycle 是官方提供的架构组件之一,目前已经是稳定版本,Lifecycle 组件包括LifecycleOwner.LifecycleObserver.Lifecycle 组件是执行操作 ...