提交form数据：jQuery ajax()用serialize()实现（附代码）

本篇文章给大家带来的内容是关于提交form数据：jquery ajax()用serialize()实现（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、选中要删除的学生信息

2、点击 删除选中 按钮，把复选框中的值取出提交到后台

3、后台获取选中的id

 

 4、前端也跟着删除数据

前端代码：

                                                                                                         

编号	姓名	性别	年龄	班级	全选

<script></script><script> //页面加载时初始化数据（数据库读取数据） $(function () { $.ajax("stu",{ type:"post", success:function (data) { //后台响应回来 json 格式的数据 //循环遍历学生信息列表 $.each(data,function (index,obj) { $("#tab").append( "<tr>"+ "<td>"+obj.sid+""+ "<td>"+obj.sname+""+ "<td>"+obj.ssex+""+ "<td>"+obj.sage+""+ "<td>"+obj.clazz.cname+""+ // 注意！！！ 在input里面需要 添加name，为了后台读取选中的值 req.getParameterValues("stuId"); "<td><input type=&#39;checkbox&#39; name=&#39;stuId&#39; value=&#39;"+obj.sid+"&#39;>"+ "" ); }); //全选/全不选 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; } }) //删除 $(&#39;#del&#39;).on("click",function () { //取出表单序列化的值 var param=$(&#39;#f&#39;).serialize(); //用ajax提交序列化的值 $.get("dels",param,function (data) { if(data==200){ //如果在后台返回来200数字表示后台在数据库已经删除成功 //后台删除成功之后前端用jQuery也随之删除对应的节点,为了不用重新再查询一遍数据 $(".box :checked").parent().parent().remove(); }else{ alert("删除失败！"); } }) /* * 也可以这种方式提交 * $.ajax("dels",{ type: &#39;get&#39;, data: $("#f").serialize(), success: function(data) { // your code ... } }); * */ }); } }); }) </script>

后台代码：（只附上删除的Servlet代码）

相关推荐：

jQuery基于ajax()使用serialize()提交form数据的方法_jquery

Jquery Ajax自定义提交表单Form 无刷新

jquery+ajax实现异步提交表单数据

以上就是提交form数据：jQuery ajax()用serialize()实现（附代码）的详细内容，更多请关注php中文网其它相关文章！