使用ajax点击按钮提交多个表单

今天做的一个页面要求点击新增按钮后table中插入一行新数据.可以新增多次.最后点击页面保存按钮,提交表单,保存数据

实现方式:ajax提交多个表单.

问题:为什么使用普通的提交按钮,通过js控制会不好使?

开始,我为了省事儿,直接获取这些新增的表单id,使用$("XXX").submit(),提交表单,发现每次有第一个表单被提交,后面就没反应了.原因是,当我们提交方法执行后,页面会消失,等待跳转到服务器返回的页面,因此,后面的表单提交都失败了.也就是说,同步提交是不能够一次性提交多个表单,因此只能异步提交(Ajax)

代码:

$("#save").click(function(){
			//获取新增的所有表单的表单id
			//获取form表单的id,使用ajax提交表单
			$("form").each(function(index,item){
				var FormId = $(this).attr("id");
				//发送ajax提交表单
				$.post("${ctx}/rol/material/save",$("#"+FormId).serialize(),function(data){},"json")
			 });
			})