jQuery ajax表單提交實現局部刷新 ajaxSubmit

jQuery ajaxSubmit可以實現AJAX提交表單 局部刷新頁面DIV  （可以實現刷新JSP TABLE 哦！）

 

需要引入 ： jquery-form.js

 

 

使用說明：

 

Java代碼  

1. $(document).ready(function() {   
2.     var options = {   
3.         target:        '#mydiv',   // 需要刷新的區域  
4.         //beforeSubmit:  showRequest,  // 提交前調用的方法  
5.         //success:       showResponse  // 返回后笤俑的方法  
6.    
7.         // other available options:   
8.         //url:       url         // 提交的URL, 默認使用FORM  ACTION   
9.         //type:      type        // 'get' or 'post', override for form's 'method' attribute   
10.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   
11.         //clearForm: true        // 是否清空form  
12.         //resetForm: true        // 是否重置form  
13.    
14.         // $.ajax options can be used here too, for example:   
15.         //timeout:   3000   
16.     };   
17.    
18.     // 綁定FORM提交事件  
19.     $('#myForm').submit(function() {   
20.         $(this).ajaxSubmit(options);   
21.    
22.         // !!! Important !!!   
23.         // always return false to prevent standard browser submit and page navigation   
24.         return false;   
25.     });   
26. });   

 

 

調用前后方法：

 

Java代碼  

1. // pre-submit callback   
2. function showRequest(formData, jqForm, options) {   
3.     // formData is an array; here we use $.param to convert it to a string to display it   
4.     // but the form plugin does this for you automatically when it submits the data   
5.     var queryString = $.param(formData);   
6.    
7.     // jqForm is a jQuery object encapsulating the form element.  To access the   
8.     // DOM element for the form do this:   
9.     // var formElement = jqForm[0];   
10.    
11.     alert('About to submit: \n\n' + queryString);   
12.    
13.     // here we could return false to prevent the form from being submitted;   
14.     // returning anything other than false will allow the form submit to continue   
15.     return true;   
16. }   
17.    
18. // post-submit callback   
19. function showResponse(responseText, statusText)  {   
20.     // for normal html responses, the first argument to the success callback   
21.     // is the XMLHttpRequest object's responseText property   
22.    
23.     // if the ajaxSubmit method was passed an Options Object with the dataType   
24.     // property set to 'xml' then the first argument to the success callback   
25.     // is the XMLHttpRequest object's responseXML property   
26.    
27.     // if the ajaxSubmit method was passed an Options Object with the dataType   
28.     // property set to 'json' then the first argument to the success callback   
29.     // is the json data object returned by the server   
30.    
31.     alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +   
32.         '\n\nThe output div should have already been updated with the responseText.');   
33. }   

 

 

項目中可以寫一個公用的方法：

 

Java代碼  

1. // 局部提交表單  
2. function formSubmit(formId, divId, url) {  
3.    $('#' + formId).submit(function() {  
4.    $(this).ajaxSubmit( {  
5.       target : '#' + divId,  
6.       url : url,  
7.       error : function() {  
8.          alert('加載頁面' + url + '時出錯！')  
9.       }  
10.    });  
11.    return false;  
12.    });  
13. }  

 

 

=====================================================================

事例 刷新TABLE：

 

1.把TABLE單獨放一個JSP，主頁面 include TABLE頁面。

 

2.主頁面：

 

 

Java代碼  

1. window.onload=function (){  
2.             //AJAX 提交FORM刷新TABLE  
3.             $('#queryForm').submit(function() {  
4.                 $(this).ajaxSubmit( {  
5.                     target : '#table1'  
6.                 });  
7.              return false;  
8.        });  
9. }  

 

點擊查詢按鈕  提交FORM。

 

3.JAVA：FORM提交調用的方法和 普通的ACTION寫法一樣， STRUTS里配置該ACTION跳轉到  那個單獨的TABLE JSP頁面，返回成功后，就會看到刷新了TABLE。 

 

Java代碼  

1. /** 
2.  * AJAX匯總查詢 未公開知情人列表 
3.  * 部門合規風控專員 匯總查詢 
4.  */  
5. public String ajaxgatherinsiderlist() {  
6.     //相關業務數據查詢  
7.     return SUCCESS;  
8. }