表单提交在使用的时候经常出现一些问题,经常混淆,现在有必要做一个小结整理一下使用方法了
1.type = submit 同步提交
<form id="form" action="/Form/Save" method="post">
<input type="text" name="username">
<input type="submit" id="tijiao" name="name" value="submit" />
</form>
2.在form标签中用onsubmit属性添加表单提交前验证
注意:return check()后可以没有分好,但是check()必须是全局函数,不要放在$(document).ready()中
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> function dosomething() { //做一些验证 return false; } function check() { if (dosomething() == true) { return true; } else { return false; } } </script> </head> <body> <div> <form id="form" action="/Form/Save" method="post" onsubmit="return check()"> <input type="text" name="username"> <input type="submit" id="tijiao" name="name" value="submit" /> </form> </div> </body> </html>
3.给type = submit添加click事件进行提交前验证
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> function dosomething() { //做一些验证 return true; } function check() { if (dosomething() == true) { return true; } else { return false; } } </script> </head> <body> <div> <form id="form" action="/Form/Save" method="post"> <input type="text" name="username"> <input type="submit" id="tijiao" name="name" value="submit" /> </form> </div> <script> $(document).ready(function () { $('#tijiao').click(function () { if (check() == true) { return true; } else { return false; } }) }) </script> </body> </html>
4.给type = button添加click事件进行提交前验证
注意:基本用法与 type = submit基本相同,不同的是,验证完不会自动提交
要添加$('#form').submit()
又要注意了,在使用$('#form').submit()方法时,表单中不能出现 name = submit ,id = submit
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> function dosomething() { //做一些验证 return true; } function check() { if (dosomething() == true) { return true; } else { return false; } } </script> </head> <body> <div> <form id="form" action="/Form/Save" method="post"> <input type="text" name="username"> <input type="button" id="tijiao" name="name" value="submit" /> </form> </div> <script> $(document).ready(function () { $('#tijiao').click(function () { if (check() == true) { return true; } else { return false; } $('#form').submit(); }) }) </script> </body> </html>
5.ajax异步提交序列化表单数据
有的时候,需要异步提交,但是data中的参数列很多的时候
通过 $('#form').serialize()获取表单数据
$.ajax({
type: 'post',
url: '/Form/Save',
data: $('#form').serialize(),
success: function (result) {
if (result.successed) {
history.go(0);
}
}
6.ajax同步提交获取返回结果
有的时候,我们需要获取等待success的操作结果
注意:jquery.ajax方法async默认是true异步提交的,等待操作结果时需要设置为false
在success方法中return true 或者 false是无效的
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> </head> <body> <div> <form id="form" action="/Form/Save" method="post"> <input type="text" name="username"> <input name="submit" value="" /> <input type="button" id="tijiao" name="name" value="submit" /> </form> </div> <script> $(document).ready(function () { function syncAjax(){ var ret; $.ajax({ type: 'post', async: false, url: '/Form/Save', data: $('#form').serialize(), success: function (result) { if (result.successed) { //DoSomeThing // ret = false; } } }) return ret; } $('#tijiao').click(function () { var ret = syncAjax(); }) }) </script> </body> </html>