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. [深度学习工具]·极简安装Dlib人脸识别库

    [深度学习工具]·极简安装Dlib人脸识别库 Dlib介绍 Dlib是一个现代化的C ++工具箱,其中包含用于在C ++中创建复杂软件以解决实际问题的机器学习算法和工具.它广泛应用于工业界和学术界,包 ...

  2. SpringMVC学习（一）———— springmvc框架原理分析和简单入门程序

    一.什么是springmvc? 我们知道三层架构的思想,并且如果你知道ssh的话,就会更加透彻的理解这个思想,struts2在web层,spring在中间控制,hibernate在dao层与数据库打交 ...

  3. 基于SpringMVC+Spring+MyBatis实现秒杀系统【概况】

    前言 本教程使用SpringMVC+Spring+MyBatis+MySQL实现一个秒杀系统.教程素材来自慕课网视频教程[https://www.imooc.com/learn/631].有感兴趣的可 ...

  4. QT 应用程序测试

    添加环境 export QTEDIR='/Qt5' export QTINC='/Qt5/include/' export QTLIB='/Qt5/lib' export QT_QPA_FB_TSLI ...

  5. MySQL系列详解九：MySQL级联复制演示-技术流ken

    前言 级联复制就是master服务器,只给后端一台slave服务器同步数据,然后这个slave服务器在向后端的所有slave服务器同步数据,这样就可以降低master服务器的写压力,和复制数据的网络I ...

  6. 数据可视化 seaborn绘图(2)

    统计关系可视化 最常用的关系可视化的函数是relplot seaborn.relplot(x=None, y=None, hue=None, size=None, style=None, data=N ...

  7. Python中return self的用法

      在Python中,有些开源项目中的方法返回结果为self. 对于不熟悉这种用法的读者来说,这无疑使人困扰,本文的目的就是给出这种语法的一个解释,并且给出几个例子.   在Python中,retur ...

  8. .NET使用ServerManager获取网站物理路径

    最近因为工作需要,用wpf做了一个辅助小工具,如下图 为了获取网站的物理路径,我分析了通过ServerManager获取到的变量,也通过百度搜索了很多,但仍然没有找到方法. 后来使用必应,在国外网站找 ...

  9. Linux下尝鲜IDE Rider .NET又一开发利器

    RiderRS 扯淡:很多人说:jetbrains出品,必属精品,jetbrains确实出了不少好东西,但是他的产品总感觉越用越慢,我的小Y430P高配版也倍感压力,内存占用率高. Multiple ...

  10. 【Java每日一题】20170322

    20170321问题解析请点击今日问题下方的“[Java每日一题]20170322”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...