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. Python快速学习03：运算 & 缩进和选择

    前言 系列文章:[传送门] 这篇昨晚本来要出的,去搭了帐篷,在学校的屋顶上. 运算 运算,不得不说的是运算符. 数学 +, -, *, /, **, %,// 判断 ==, !=, >, > ...

  2. JS判断滚动条到底部，页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  3. 创业公司都在使用的3款Python库

    Instavest上发表了一篇博文,文章分享了深受创业公司喜爱的3款Python库,该文章在Hacker News上引发了开发者的激烈探讨,如果你也对此感兴趣,不妨移步去看下.笔者将该文简译过来以分享 ...

  4. linux常用命令学习笔记

    1.top命令 作用:该命令可以按CPU使用.内存使用和执行时间对任务进行排序,常用来监控系统中占用CPU或内存较高的程序及CPU和内存的负载. 默认视图: 当想看系统负载时,可观察汇总的%CPU中的 ...

  5. UnicodeDecodeError: 'ascii' codec can't decode byte

    这个问题遇到过很多次了,但是每次都没记住,用完就忘了,这次记录下. 通过关键词谷歌一下: 解决方案: # encoding=utf8 import sys reload(sys) sys.setdef ...

  6. ORA-00257 archiver error的处理

    ORA-00257 archiver error的处理 检查flash recovery area的使用情况 SQL> set linesize 100 SQL> col paramete ...

  7. scala的安装及使用

    前提你的集群机器已经安装好jdk1.7.0_79.hadoop-2.7.3: 配置中使用了master01.slave01.slave02.slave03: 文中的所有操作都是在之前的文章http:/ ...

  8. 【微服务No.4】 API网关组件Ocelot+Consul

    介绍: Ocelot是一个.NET API网关.该项目针对的是使用.NET运行微服务/面向服务架构的人员,他们需要一个统一的入口进入他们的系统.然而,它可以处理任何说HTTP并在ASP.NET Cor ...

  9. Flask 系列之 FlaskForm

    通过使用 FlaskForm ,可以方便快捷的实现表单处理. 说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验 ...

  10. Android LiveData使用

    LiveData是一个可观察的数据持有者类. 与常规observable不同,LiveData是生命周期感知的,当生命周期处于STARTED或RESUMED状态,则LiveData会将其视为活动状态, ...