慎用jQuery中的submit()方法

发布时间：2020-08-03 02:15:36 来源：网络阅读：1206 作者：zcfortest 栏目：web开发

今天在做项目的过程中用到了submit()提交表单。

折腾许久很是郁闷，经过多方资料查询和亲测后，得出结论：

一定要慎用submit()方法

首先，在form表单中一定不要将input中的name或id命名为submit，否则会导致在submit()的失效，例如以下脚本在所有浏览器（IE/FF/CHROME/SAFARI）中都会失效：

<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<title>Page Title</title>
</head>
<body>
<form id="myform" method="post" action="chromeTest.php">
<input name="test" value="test">
<input type="submit" name="submit" value="Edit">
</form>
<script>
$(function(){
	form = $('#myform'); 
	$('#myform input[type="submit"]').on("click",function(e){
		e.preventDefault()
		form.submit();
	})
})

</script>
</body>
</html>

jquery的官方文档的additional notes中也提到了这一点

https://api.jquery.com/submit/

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit,length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

----------------------

其次，我们要注意到通过form.submit()提交的表单，相对于正常提交表单会遗漏一些信息。

测试以下两个脚本：

脚本1

<?
//脚本1
if(!empty($_POST))
print_r($_POST);
?>
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<title>Page Title</title>
</head>
<body>
<form id="myform" method="post" action="chromeTest.php">
<input type="text" name="text1" value="test">
<input type="password" name="password1" value="test">
<input type="radio" name="radio1" value="test">
<input type="checkbox" name="checkbox1" value="test">
<input type="button" name="button1" value="test">
<input type="submit" name="submit1" value="Edit">
<input type="reset" name="reset1" value="Reset">
</form>
<script>
$(function(){
	form = $('#myform'); 
	$('#myform input[type="submit"]').on("click",function(e){
		e.preventDefault()

		form.submit();
	})
})

</script>
</body>
</html>

输出结果为：

Array
(
    [text1] => test
    [password1] => school
    [radio1] => test
    [checkbox1] => test
)

脚本2

<?
//脚本2
if(!empty($_POST))
print_r($_POST);
?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form id="myform" method="post" action="chromeTest.php">
<input type="text" name="text1" value="test">
<input type="password" name="password1" value="test">
<input type="radio" name="radio1" value="test">
<input type="checkbox" name="checkbox1" value="test">
<input type="button" name="button1" value="test">
<input type="submit" name="submit1" value="Edit">
<input type="reset" name="reset1" value="Reset">
</form>
</body>
</html>

输出结果为：

Array
(
    [test1] => test
    [password1] => school
    [radio1] => test
    [checkbox1] => test
    [submit1] => Edit
)

比较结果：

type为"text"、"password"、"radio"、"checkbox"的input在两种方法中都会正常传递
type为"button"、"reset"的input在两种方法中都不会传递
type为"submit"的input在正常的表单提交中会传递，而在submit()中会丢失

解决方法：

在submit()前，添加"submit"的值

<input type="hidden" name="submit1" value="Edit">

2.换用以下方法，亲测可用

form.submit(function(){
    submit = true
    //你的业务逻辑
    if(!submit) return false
})

---------------

要说明一点：

网上有部分声音说webkit浏览器（例如chrome）不支持submit()方法，根据我亲身测试新版本的chrome/safari是支持的，可能某些远古版本不支持吧。

最后附上测试所用的浏览器版本：

Chrome： 50.0.2661.102 m

Firfox： 48.0a2

IE：11.0.9600

Safari：windows上的5.1.7 及IOS9.3.1上的Safari

向AI问一下细节

慎用jQuery中的submit()方法

猜你喜欢

最新资讯

相关推荐

相关标签