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

今天在做维护时，遇到一段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()
• 在上步JQuery提交的事件处理方法中还使用了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://www.ichatter.cn/2013/05/14/549/)