本篇文章给大家带来的内容是关于提交form数据：jquery ajax()用serialize()实现（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、选中要删除的学生信息
2、点击 删除选中 按钮，把复选框中的值取出提交到后台
3、后台获取选中的id
4、前端也跟着删除数据
前端代码：
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e    a80eb7cbb6fff8b0ff70bae37074b813    b2386ffb911b14667cb8f0f91ea547a7title6e916e0f7d1e588d4f442bf645aedb2f9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d4a249f0d628e2318394fd9b75b4636b1学生信息列表473f0a7621bec819994bb5020d29372a3c1cc7a1c309adab576827ec131ed109//表格外面加一个form表单包括table,为了序列化表单//里面不需要添加method..就给一个id就行了1c6bf004c08b0e919483f73c3d2d87fb    449b0462bdcea5a350d64e97358e9bb6        a34de1251f0d9fe1e645927f19a896e8            b4d429308760b6c2d20d6300079ed38e编号01c3ce868d2b3d9bce8da5c1b7e41e5b            b4d429308760b6c2d20d6300079ed38e姓名01c3ce868d2b3d9bce8da5c1b7e41e5b            b4d429308760b6c2d20d6300079ed38e性别01c3ce868d2b3d9bce8da5c1b7e41e5b            b4d429308760b6c2d20d6300079ed38e年龄01c3ce868d2b3d9bce8da5c1b7e41e5b            b4d429308760b6c2d20d6300079ed38e班级01c3ce868d2b3d9bce8da5c1b7e41e5b            b4d429308760b6c2d20d6300079ed38e全选16746c2757b891e4373266738f13d9fd01c3ce868d2b3d9bce8da5c1b7e41e5b        fd273fcf5bcad3dfdad3c41bd81ad3e5    f16b1740fad44fb09bfe928bcc527e08f5a47148e367a6035fd7a2faa965022e36cc49f0c466276486e50c850b7e49561b7f746145f38ed61acdb95e3d3b14962cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83a    //页面加载时初始化数据（数据库读取数据）    $(function () {        $.ajax(stu,{            type:post,            success:function (data) {                //后台响应回来 json 格式的数据                //循环遍历学生信息列表                $.each(data,function (index,obj) {                    $(#tab).append(                        a34de1251f0d9fe1e645927f19a896e8+                            b6c5a531a458a2e790c1fd6421739d1c+obj.sid+b90dd5946f0946207856a8a37f441edf+                            b6c5a531a458a2e790c1fd6421739d1c+obj.sname+b90dd5946f0946207856a8a37f441edf+                            b6c5a531a458a2e790c1fd6421739d1c+obj.ssex+b90dd5946f0946207856a8a37f441edf+                            b6c5a531a458a2e790c1fd6421739d1c+obj.sage+b90dd5946f0946207856a8a37f441edf+                            b6c5a531a458a2e790c1fd6421739d1c+obj.clazz.cname+b90dd5946f0946207856a8a37f441edf+                            // 注意！！！  在input里面需要 添加name，为了后台读取选中的值  req.getparametervalues(stuid);                            b6c5a531a458a2e790c1fd6421739d1ccb3858a03188ca2f66cc9efaa2efa457b90dd5946f0946207856a8a37f441edf+                        fd273fcf5bcad3dfdad3c41bd81ad3e5                    );                });                //全选/全不选                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 ...                           }                       });                   * */                });            }        });    })2cacc6d41bbb37262a98f745aa00fbf073a6ac4ed44ffec12cee46588e518a5e
后台代码：（只附上删除的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数据的方法_jquery
jquery ajax自定义提交表单form 无刷新
jquery+ajax实现异步提交表单数据
以上就是提交form数据：jquery ajax()用serialize()实现（附代码）的详细内容。