jQuery之ajaxForm提交表單

 

1.jQuery的設計非常優雅，其源代碼亦給人以美感，利用jQuery框架寫出來的js既簡練又能完美跨瀏覽器。   
2.jquery form插件是基於jQuery開發的一套能夠利用ajax技術提交form的框架。   
3.無論是jQuery，還是jquery form 都是老外寫的。   
4.通常的jQuery ajax提交寫法如下：   
5. $.post("../user/user.do?d=checkPasswordOnUpdateByAjax",{old_password:old_password.val()},function(xml){   
6.  });   
7.其中：｛old_password:old_password.val()｝是掛的參數，為json串格式。如果只有幾個參數，這種方法還是值得一用的，如果有幾十個，從軟件可維護性的角度去考慮，用這種方法實在不敢恭維。我曾經寫過一個根據form的頁內數據元素生成Json串的方法。但是對自己寫的東西總覺得不夠滿意，有沒有一種可以提交form數據的插件呢，google一下，輸入關鍵字 jquery form plugin 。我很榮幸的搜到了我需要的東西，既然已經有輪子，自己發明的輪子暫時先放棄。從此我對jQuery form 的依賴及使用變得一發不可收拾。在我做的項目中大量的使用了該插件進行ajax數據提交。   
8.把jquery form的相關文件導入頁面   
9.<script language="javaScript" src="../static/js/base/jquery.js"></script>      <!--jquery 包-->   
10.<script language="javaScript" src="../static/js/base/jquery.form.js"></script>   <!--jquery  form包-->   
11.且二者順序不可以放反，因為文件是自上而下解析的。   
12.function submitForm(){   
13.    var form = $("form[name=MsgForm]");   
14.    if($("input[name=user_name]").val() == null || $("input[name=user_name]").val() == ""){//這里是如果user_name為空則用ajaxform提交，否則按照傳統方式提交。   
15.        //ajax form post   
16.        var options = {success:showResponse,resetForm:true,url:"../user/msg.do?d=sendMsgByAjax"};   
17.        form.ajaxForm(options);   
18.        return;   
19.    }   
20.    form.submit();// 傳統form提交   
21.}   
22.function showResponse(xml){//回調函數   
23.    if(1 == xml){   
24.        alert("信息發送成功！");   
25.    }else{   
26.        alert("信息發送失敗！");   
27.    }   
28.}   
29.注意：   
30.xml的值1或者-1是后台用response打出來的。如下：   
31.response.setContentType("text/html;charSet=UTF-8");    
32.response.setCharacterEncoding("UTF-8");    
33.PrintWriter pw = response.getWriter();    
34.pw.println("1");   
35.url就是form表單要提交到的地址，當然若不指定，會自動使用form里action的值。   
36.success的值也是函數，就是提交表單處理完后要做的事。

實例：

function jquerySubmit(formId,url,callback){//formId為表單id var options = { beforeSubmit: showRequest, success: showResponse, url: url, formId: formId, type: 'post', dataType: 'json', handle: callback }; $("#"+formId).ajaxForm(options); $("#"+formId).submit(); }