這篇文章主要介紹了jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法,涉及jQuery插件實(shí)現(xiàn)form表單的Ajax提交技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法。分享給大家供大家參考。具體分析如下：

這個(gè)框架集合form提交、驗(yàn)證、上傳的功能。

這個(gè)框架必須和jquery完整版結(jié)合，否則使用min則無(wú)效。

原理：利用js進(jìn)行對(duì)form進(jìn)行組裝成ajax的url和data，原理還是用ajax來(lái)提交，其實(shí)這完全可以自己寫，但是有這個(gè)框架可能會(huì)更簡(jiǎn)單。

一、最簡(jiǎn)單例子：

第一步：引用js

1. <!--這里的min是自己用js壓縮工具對(duì)完整版進(jìn)行的壓縮 
2. 并不是真正的min，所以好使--> 
3. <script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
4. <script type="text/javascript" src="js/jquery.form.js"></script> 

第二步：頁(yè)面寫form

1. <form id="showDataForm" 
2. action="/024pm/f_shopUser.do?method=login" method="post"> 
3. <input type="text" value="" name="name" maxlength="2"/> 
4. <input type="password" value="" name="password" maxlength="2"/> 
5. <input type="submit" value="提交"/> 
6. </form> 
7. <div id="output1" 
8. style="width:1000px;height:200px;background-color:#eee;"> 
9. </div> 

第三步：寫js調(diào)用jquery.form.js，對(duì)form表單進(jìn)行ajax提交

1. $(document).ready(function() { 
2. var options = { 
3. target: '#output1', 
4. // 從服務(wù)傳過(guò)來(lái)的數(shù)據(jù)顯示在這個(gè)div內(nèi)部 
5. 也就是ajax局部刷新 
6. beforeSubmit: showRequest, 
7. // ajax提交之前的處理 
8. success: showResponse 
9. // 處理之后的處理 
10. }; 
11. $('#showDataForm').submit(function() { 
12. $(this).ajaxSubmit(options); 
13. return false;  
14. //非常重要，如果是false，則表明是不跳轉(zhuǎn) 
15. //在本頁(yè)上處理，也就是ajax，如果是非false，則傳統(tǒng)的form跳轉(zhuǎn)。 
16. }); 
17. }); 
18. function showResponse(responseText, statusText, xhr, $form) { 
19. alert(xhr.responseText+"=="+$form.attr("method")+'status: ' +  
20. statusText + '/n/nresponseText: /n' + responseText); 
21. //xhr：說(shuō)明你可以用ajax來(lái)自己再次發(fā)出請(qǐng)求 
22. //$form：是那個(gè)form對(duì)象，是一個(gè)jquery對(duì)象 
23. //statusText：狀態(tài)，成功則為success 
24. //responseText，服務(wù)器返回的是字符串（當(dāng)然包括html，不包括json） 
25. } 
26. function showRequest(formData, jqForm, options) { 
27. //formData是數(shù)組，就是各個(gè)input的鍵值map數(shù)組 
28. //通過(guò)這個(gè)方法來(lái)進(jìn)行處理出來(lái)拼湊出來(lái)字符串。 
29. //formData：拼湊出來(lái)的form字符串，比如name=hera&password， 
30. //其實(shí)就是各個(gè)表單中的input的鍵值對(duì)， 
31. //如果加上method=XXXX，那也就是相當(dāng)于ajax內(nèi)的data。 
32. var queryString = $.param(formData); 
33. alert(queryString+"======"+formData.length); 
34. for (var i=0; i < formData.length; i++) { 
35. alert(formData[i].value+"==============="+formData[i].name); 
36. } 
37. //jqForm，jquery form對(duì)象 
38. var formElement = jqForm[0]; 
39. alert($(formElement).attr("method")); 
40. alert($(jqForm[0].name).attr("maxlength")); 
41. //非常重要，返回true則說(shuō)明在提交ajax之前你驗(yàn)證 
42. //成功，則提交ajax form 
43. //如果驗(yàn)證不成功，則返回非true，不提交 
44. return true; 
45. } 

二、options對(duì)象內(nèi)的值有哪些？

主要的有那么幾個(gè)常用的屬性：

1. var options = { 
2. target: '#output1',  
3. data:{param1:"我自己的第一個(gè)額外的參數(shù)"}, 
4. //這個(gè)參數(shù)是指通過(guò)ajax來(lái)給服務(wù)器提交除了form內(nèi)部input的參數(shù) 
5. //在后臺(tái)中使用String param1=req.getParameter("param1");獲取。 
6. // dataType: null, 
7. dataType:'json', 
8. //這個(gè)參數(shù)值的是服務(wù)器返回的數(shù)據(jù)類型，默認(rèn)的是null 
9. //也就是服務(wù)器可以默認(rèn)返回字符串，然后將這些字符串放在target內(nèi)部 
10. //當(dāng)然還有json、xml，其中最常用的便是null和json 
11. //對(duì)于json的使用，我們會(huì)稍后講解到 
12. beforeSubmit: showRequest, 
13. success: successRes， 
14. type：'POST' 
15. //提交方式，默認(rèn)是自己在form標(biāo)簽上指定的method 
16. //如果沒(méi)有指定，則使用get。 
17. url：'' 
18. //重新提交的url，即url可以在form中配置 
19. //也可以在這里配置。 
20. }; 

三、如何解析服務(wù)器傳遞過(guò)來(lái)的json數(shù)據(jù)

我們知道，使用jquery提供的ajax方法，如果服務(wù)器傳遞回來(lái)的是json數(shù)據(jù)，是可以轉(zhuǎn)換為js的json對(duì)象，然后可以通過(guò)json.xxx來(lái)獲取相應(yīng)的值。那么這個(gè)框架呢?

1)首先options參數(shù)中指定dataType：'json'

2)通過(guò)框架進(jìn)行提交

3)服務(wù)器接收

4)服務(wù)器返回json

5)頁(yè)面js接收json

關(guān)鍵是第五步，如何js接收json，是可以通過(guò)success: 指定的方法內(nèi)部進(jìn)行如下操作：

1. var options = { 
2. target: '#output1',  
3. dataType:'json', 
4. beforeSubmit: showRequest, 
5. success: successRes 
6. //注意了，successRes方法看起來(lái)并沒(méi)有有參數(shù) 
7. //但是為何下面的方法就能有參數(shù)了呢，是可以這么傳遞的。 
8. function successRes(jsonData){ 
9. alert(jsonData.param1); 
10. } 

四、如何通過(guò)這個(gè)框架進(jìn)行簡(jiǎn)單的驗(yàn)證呢？

說(shuō)到驗(yàn)證，那肯定是在beforeSubmit的方法內(nèi)部進(jìn)行驗(yàn)證的，如何驗(yàn)證，因?yàn)檫@個(gè)方法已經(jīng)將jqform對(duì)象，還有formData都傳給你了，你可以拿這兩個(gè)參數(shù)進(jìn)行獲取相應(yīng)的input，然后進(jìn)行自己的判定，如果判定成功，則提交。

1. function showRequest(formData, jqForm, options) { 
2. for (var i=0; i < formData.length; i++) { 
3. alert(formData[i].value+"========"+formData[i].name); 
4. if (!formData[i].value) { 
5. //驗(yàn)證是否填寫完整 
6. alert('input有沒(méi)有填寫的選項(xiàng)'); 
7. //如果驗(yàn)證不通過(guò)，則返回false 
8. return false; 
9. } 
10. } 
11. var formElement = jqForm[0]; 
12. alert($(jqForm[0].name).attr("maxlength")); 
13. return true; 
14. } 

jquery.form.js文件點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。