慎用jQuery中的submit()方法

2024-11-22 技术教程

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

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

一定要慎用submit()方法

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

<!DOCTYPEhtml><html><head><scriptsrc="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script><title>PageTitle</title></head><body><formid="myform"method="post"action="chromeTest.php"><inputname="test"value="test"><inputtype="submit"name="submit"value="Edit"></form><script>$(function(){form=$('#myform');$('#myforminput[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 assubmit,length, ormethod. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, seeDOMLint.

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

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

测试以下两个脚本：

脚本1

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

输出结果为：

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

脚本2

<?//脚本2if(!empty($_POST))print_r($_POST);?><!DOCTYPEhtml><html><head><title>PageTitle</title></head><body><formid="myform"method="post"action="chromeTest.php"><inputtype="text"name="text1"value="test"><inputtype="password"name="password1"value="test"><inputtype="radio"name="radio1"value="test"><inputtype="checkbox"name="checkbox1"value="test"><inputtype="button"name="button1"value="test"><inputtype="submit"name="submit1"value="Edit"><inputtype="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"的值

<inputtype="hidden"name="submit1"value="Edit">

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

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

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