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. 【干货】Jquery.Datables与Bootstrap3的组合使用

    官方地址 datatables官方网址:www.datatables.net 下载bootstrap3与datables文件包 引用文件 css:bootstrap.css.dataTables.bo ...

  2. 【原创】Git删除暂存区或版本库中的文件

    0 基础     我们知道Git有三大区(工作区.暂存区.版本库)以及几个状态(untracked.unstaged.uncommited),下面只是简述下Git的大概工作流程,详细的可以参见本博客的 ...

  3. OnlineJudge难度与正确度的相关性检验

    本着做题的心态,上了东莞理工学院的 oj 网:在选择难度的时候发现有些题目通过率和难度可能存在着某些关系,于是决定爬下这些数据简单查看一下是否存在关系. 一.新建项目 我是用 Scrapy 框架爬取的 ...

  4. Hyperledger Fabric链码之三

    在<Hyperledger Fabric链码之一>和<Hyperledger Fabric链码之二>中我们介绍了链码的定义,并通过dev网络测试了测试了自己编写的链码程序. 本 ...

  5. 如何用golang获取linux上文件的访问/创建/修改时间

    在linux上想获取文件的元信息,我们需要使用系统调用lstat或者stat. 在golang的os包里已经把stat封装成了Stat函数,使用它比使用syscall要方便不少. 这是os.Stat的 ...

  6. Docker在Linux上运行NetCore系列（二）把本地编译好的镜像发布到线上阿里云仓库

    转发请注明此文章作者与路径,请尊重原著,违者必究. 系列文章:https://www.cnblogs.com/alunchen/p/10121379.html 开始 本篇文章结束在本地创建完成镜像后, ...

  7. .NET记录-获取外网IP以及判断该IP是属于网通还是电信

    在工作时,需要获取服务器公网IP(外网IP),并且判断该IP地址是属于网通还是电信.花时间整理一下,自己实现的代码,以及后续遇到的问题. /// <summary> /// 获取外网IP ...

  8. Ubuntu 18.1远程登录服务器--ssh的安装

    默认的Ubuntu 18.1桌面版没有安装ssh远程登录服务: 打开"终端窗口",输入"sudo apt-get update"-->回车-->&q ...

  9. C# 从Excel中读取条码

    条形码的应用三------从Excel文件中读取条形码 介绍 上一篇文章,我向大家展示了生成多个条形码并存储到Excel文件中的一个方法.后来我又有了个想法:既然条码插入到excel中了,我可不可以从 ...

  10. 快速排序 and 拉格朗日插值查找

    private static void QuictSort(int[] zu, int left, int right) { if (left < right) { ; ; ]; while ( ...