采用JQuery提交表单的一个小小问题

最新推荐文章于 2022-09-19 16:16:51 发布

原创最新推荐文章于 2022-09-19 16:16:51 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #action #login #input #button

java 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用JQuery提交表单时遇到的问题，即表单的action属性无法生效，导致表单无法正确提交到后台。通过对比原生JavaScript的方法，验证了此问题的存在，并提出了可能的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在复习的时，发现一个问题：在某种场景下使用JQuery的时(不是用$.ajax请求 )，表单form的action属性会丢失，导致form提交不到后台去。还是直接看代码吧：

<body> <form id="loginForm" name="loginForm"> userName: <input id="userName" name="userName"><br/> password: <input type="password" id="password" name="password" /><br/> <button id='login'>login</button><input type="reset" name="reset" value="reset"/> </form> </body>

采用JQuery提交表单的代码：

$(document).ready(function(){ $('#login').click(function(){ var userName = $('#userName').val(); var password = $('#password').val(); // ............. $('#loginForm').action = 'login.action'; $('#loginForm').submit(); }); });

此时提交表单后浏览器的url为： http://localhost:8080/useJQuery/?userName=zhangsan&password=psswd 很明显，form表单的action属性设置无效。尝试了很久，怀疑是JQuery的一个Bug吧。于是准备采用原始的土办法来试试，代码为：

window.onload = function() { document.getElementById('login').onclick = function() { document.loginForm.action = 'login.action'; document.loginForm.submit(); } }

这样表单却成功的提交了。

不知道算不算是JQuery的Bug吧？