使用这个方法首先要调用jquery的一个from表单的提交插件这个插件可以去jquery的官网上下载,名字 jquery-form.js ,也可以直接下载上面的。
其实主要思路就是,利用 jq 获取到表单元素,调用他的 prop() 来改变 action 的值,然后再调用 ajaxSubmit()方法来提交表单。但是记住,在每次修改 action 的值之前一定要调用 reset()方法重置表单。
首先找到要提交的Form表单,然后使用action这个方法,然后用post来提交这个方法。
action=“路径”,method=“提交方法”,这里我用的是post这个方法,但除了这个方法还有很多其他如get方法。看自己需要什么方法就去调用就可以了。
<form id="activity_from" action="" method="post">
接下来这个路径就要去处理了,之需要在掉用的function里面加上from表单的路径即可。
这里有两种弹出模态框一个新增一个修改,但提交的form表单都是一个form表单只是设置的路径不一样而已,这里可以看到新增模态框里面的# avticity_form 这个form表单的调用路径设置,porp这个方法然后prop(a,b)里面a为设置路径的方法,b为设置的路径。
之后可以看到修改模态框里面的路径与新增的路径是不一样的。这样就可以达成一个form表单提交新增与修改了。
//点击新增按钮,要将表单中value清空 add_activity是新增按钮 $('#add_activity').on("click", function () { $("#activity_from")[0].reset() //重置表单 //可以在这里做一些你需要的操作 $("#activity_from").prop("action","ActivityAdvanced/addActivityAdvanced") //重新修改action的提交地址 })
//修改按钮 $('#upd_activity').on("click", function () { $("#activity_from")[0].reset() //重置表单 //可以在这里做一些你需要的操作 $("#activity_from").prop("action","ActivityAdvanced/ActivityAdvanced") //重新修改action的提交地址 })
写完了提交的路径接下来就开始保存了,接下来用ajaxSubmit这个方法来提交表单,这个方法可以把表单的内容给提交到控制器里面去。用ajax这个方法提交表单就不需要再去声明变量来接收表单数据。
// 点击提交,也就是保存新增或者是修改 $('#save_form').on('click', function () { //可以加一些判断,比如输入框不能为空 来决定是否调用下面这个方法,该方法是提交表单 //_toastr()这个方法是我自定义的方法,弹出提示框, $("#activity_from").ajaxSubmit(function (res) { console.log(res) if (res) { _toastr("success", "添加成功!重新刷新页面") }else _toastr("error", "添加失败!") }) });