JQuery中使用ajax提交表单遇到的问题

javascript May 14 2013


今天在做维护时,遇到一段JQuery旧代码,看得很纠结,大致结构如下:

html代码<form id="myForm" method="post" action="abc.action"> <input type="hidden" name="opID" value="testQry"> .... <input type="submit" id="mySubmit" value="提交"></form> javascript代码$("#mySubmit").click(function(){ doSubmit();});//提交function doSubmit(){ $("myForm").submit(function(){ $.post("abc.action?opID=testQry", $("myForm").serialize(), function(data){ alert(data); //...... }); }); }

这段代码主要存在两个方面的问题:   1.表单有重复提交之嫌。  
  • 使用的按钮类型为submit

  • 使用JQuery提交表单$(“myForm”).submit()

  • 在$(“myForm”).submit()的事件处理方法中还使用了ajax异步提交$.post() 2.传参的问题。

 $.post()提交时参数opID出现重复。

 首先看第一个问题,写JS代码的时候,这种重复提交的方式显然是很危险的,如果要使用异步提交表单,则干脆对代码作如下简化:   提交按钮修改为button类型

<input type="button" id="mySubmit" value="提交"> javascript进行简化
$("#mySubmit").click(function(){ $.post("abc.action?opID=testQry", $("myForm").serialize(), function(data){ alert(data); //...... });}); 这样就去掉了表单submit类型按钮的表单提交及JQuery中的$(“myForm”).submit方法提交,只保留了ajax这一种提交方式,使代码既简单易理解,也更安全。
第二个问题,其实承接第一个问题,由于参数在ajax提交时名称和值重复(url中opID=testQry和$(“myForm”).serialize()),所以上面简化后的代码依然提交不了。需要将$.post()中的url参数opID=testQry去掉,即可。

原文链接:http://ichatter.cn/jquery-e4-b8-ad-e4-bd-bf-e7-94-a8ajax-e6-8f-90-e4-ba-a4-e6-97-b6-e9-81-87-e5-88-b0-e7-9a-84-e9-97-ae-e9-a2-98.html


欢迎来到阿J小虫的博客

Follow @ichatter on GitHub

最新评论

推荐内容