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/)