原文地址为:jQuery ajax表单提交实现局部刷新 ajaxSubmit
<http://www.itdaan.com/blog/2013/06/05/698d6acd5cb709a9967c5aeb480c20d8.html>


jQuery <http://www.javaxxz.com/thread-364542-1-1.html> ajax
<http://www.javaxxz.com/thread-321176-1-1.html>Submit可以实现
<http://www.javaxxz.com/thread-284008-1-1.html>AJAX提交表单 局部刷新页面DIV  (可以实现刷新JSP
TABLE 哦!)

 

需要引入 : jquery-form.js

 

 

使用说明:

 

Java代码  

* $(document).ready(function() {   
*     var options = {   
*         target:        '#mydiv',   // 需要刷新的区域  
*         //beforeSubmit:  showRequest,  // 提交前调用的方法  
*         //success:       showResponse  // 返回后笤俑的方法  
*    
*         // other available options:   
*         //url:       url         // 提交的URL, 默认使用FORM  ACTION   
*         
//type:      type        // 'get' or 'post', override for form's 'method' attribute 
  
*         
//dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
  
*         //clearForm: true        // 是否清空form  
*         //resetForm: true        // 是否重置form  
*    
*         // $.ajax options can be used here too, for example:   
*         //timeout:   3000   
*     };   
*    
*     // 绑定FORM提交事件  
*     $('#myForm').submit(function() {   
*         $(this).ajaxSubmit(options);   
*    
*         // !!! Important !!!   
*         
// always return false to prevent standard browser submit and page navigation   
*         return false;   
*     });   
* });   
 

 

调用前后方法:

 

Java代码  

* // pre-submit callback   
* function showRequest(formData, jqForm, options) {   
*     
// formData is an array; here we use $.param to convert it to a string to display it 
  
*     
// but the form plugin does this for you automatically when it submits the data 
  
*     var queryString = $.param(formData);   
*    
*     
// jqForm is a jQuery object encapsulating the form element.  To access the   
*     // DOM element for the form do this:   
*     // var formElement = jqForm[0];   
*    
*     alert('About to submit: \n\n' + queryString);   
*    
*     // here we could return false to prevent the form from being submitted; 
  
*     
// returning anything other than false will allow the form submit to continue   
*     return true;   
* }   
*    
* // post-submit callback   
* function showResponse(responseText, statusText)  {   
*     
// for normal html responses, the first argument to the success callback   
*     // is the XMLHttpRequest object's responseText property   
*    
*     
// if the ajaxSubmit method was passed an Options Object with the dataType   
*     
// property set to 'xml' then the first argument to the success callback   
*     // is the XMLHttpRequest object's responseXML property   
*    
*     
// if the ajaxSubmit method was passed an Options Object with the dataType   
*     
// property set to 'json' then the first argument to the success callback   
*     // is the json data object returned by the server   
*    
*     alert('status: ' + statusText + '\n\nresponseText: \n'
 + responseText +   
*         
'\n\nThe output div should have already been updated with the responseText.'
);   
* }   
 

 

项目中可以写一个公用的方法:

 

Java代码  

* // 局部提交表单  
* function formSubmit(formId, divId, url) {  
*    $('#' + formId).submit(function() {  
*    $(this).ajaxSubmit( {  
*       target : '#' + divId,  
*       url : url,  
*       error : function() {  
*          alert('加载页面' + url + '时出错!')  
*       }  
*    });  
*    return false;  
*    });  
* }  
 

 

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

事例 刷新TABLE:

 

1.把TABLE单独放一个JSP,主页面 include TABLE页面。

 

2.主页面:

 

 

Java代码  

* window.onload=function (){  
*             //AJAX 提交FORM刷新TABLE  
*             $('#queryForm').submit(function() {  
*                 $(this).ajaxSubmit( {  
*                     target : '#table1'  
*                 });  
*              return false;  
*        });  
* }  
 

点击查询按钮  提交FORM。

 

3.JAVA:FORM提交调用的方法和 普通的ACTION写法一样, STRUTS里配置该ACTION跳转到  那个单独的TABLE
JSP页面,返回成功后,就会看到刷新了TABLE。 

 

Java代码  

* /** 
*  * AJAX汇总查询 未公开知情人列表 
*  * 部门合规风控专员 汇总查询 
*  */  
* public String ajaxgatherinsiderlist() {  
*     //相关业务数据查询  
*     return SUCCESS;  
* }  
 

 

转载请注明本文地址:jQuery ajax表单提交实现局部刷新 ajaxSubmit
<http://www.itdaan.com/blog/2013/06/05/698d6acd5cb709a9967c5aeb480c20d8.html>

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信