jQuery ajax表单提交实现局部刷新 ajaxSubmit - 好文

原文地址为：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>

热门工具换一换