jQuery ajaxSubmit 实现ajax提交表单局部刷新
AJAX简介
AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
需要引入：jquery-form.js
使用说明：
Java代码
$(document).ready(function(){
varoptions={
target:'#mydiv',//需要刷新的区域
//beforeSubmit:showRequest,//提交前调用的方法
//success:showResponse//返回后笤俑的方法
//otheravailableoptions:
//url:url//提交的URL,默认使用FORMACTION
//type:type//'get'or'post',overrideforform's'method'attribute
//dataType:null//'xml','script',or'json'(expectedserverresponsetype)
//clearForm:true//是否清空form
//resetForm:true//是否重置form
//$.ajaxoptionscanbeusedheretoo,forexample:
//timeout:3000
};
//绑定FORM提交事件
$('#myForm').submit(function(){
$(this).ajaxSubmit(options);
//!!!Important!!!
//alwaysreturnfalsetopreventstandardbrowsersubmitandpagenavigation
returnfalse;
});
});
调用前后方法：
Java代码
//pre-submitcallback
functionshowRequest(formData,jqForm,options){
//formDataisanarray;hereweuse$.paramtoconvertittoastringtodisplayit
//buttheformplugindoesthisforyouautomaticallywhenitsubmitsthedata
varqueryString=$.param(formData);
//jqFormisajQueryobjectencapsulatingtheformelement.Toaccessthe
//DOMelementfortheformdothis:
//varformElement=jqForm[0];
alert('Abouttosubmit:\n\n'+queryString);
//herewecouldreturnfalsetopreventtheformfrombeingsubmitted;
//returninganythingotherthanfalsewillallowtheformsubmittocontinue
returntrue;
}
//post-submitcallback
functionshowResponse(responseText,statusText){
//fornormalhtmlresponses,thefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseTextproperty
//iftheajaxSubmitmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'xml'thenthefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseXMLproperty
//iftheajaxSubmitmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'json'thenthefirstargumenttothesuccesscallback
//isthejsondataobjectreturnedbytheserver
alert('status:'+statusText+'\n\nresponseText:\n'+responseText+
'\n\nTheoutputdivshouldhavealreadybeenupdatedwiththeresponseText.');
}
项目中可以写一个公用的方法：
Java代码
//局部提交表单
functionformSubmit(formId,divId,url){
$('#'+formId).submit(function(){
$(this).ajaxSubmit({
target:'#'+divId,
url:url,
error:function(){
alert('加载页面'+url+'时出错！')
}
});
returnfalse;
});
}
=====================================================================
事例刷新TABLE：
1.把TABLE单独放一个JSP，主页面includeTABLE页面。
2.主页面：
Java代码
window.onload=function(){
//AJAX提交FORM刷新TABLE
$('#queryForm').submit(function(){
$(this).ajaxSubmit({
target:'#table1'
});
returnfalse;
});
}
点击查询按钮提交FORM。
3.JAVA：FORM提交调用的方法和普通的ACTION写法一样，STRUTS里配置该ACTION跳转到那个单独的TABLEJSP页面，返回成功后，就会看到刷新了TABLE。
Java代码
/**
*AJAX汇总查询未公开知情人列表
*部门合规风控专员汇总查询
*/
publicStringajaxgatherinsiderlist(){
//相关业务数据查询
returnSUCCESS;
}
以上所述是小编给大家介绍的jQueryajaxSubmit实现ajax提交表单局部刷新，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！