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. }