jquery.form.js插件中ajaxSubmit提交在jquery1.4版本中的应用

下以处理的是对含有<inputtype"file"/>元素的表单,利用jquery.form的ajaxSubmit方法进行类似ajax提交的应用情况:

注:发果用jquery1.3.2版本与jquery.form.js使用的话,没什么问题照官方文档说明就OK的;但如果用jquery1.4.x的话,就存在诸多奇怪的问题,解决的很久才取出以下解决方案!

兼容firefox,chrome,IE7/8的最终代码:

客户端:

引用文件:

<scriptsrc="js/jquery/jquery-1.4.4.js"type="text/javascript"></script>

<scripttype="text/javascript"src="js/jquery_plugins/form/jquery.form.js"></script>

js代码:

<scripttype="text/javascript">

//-------------------form---------------------------------

//表單的異步提交

functionsubmitForm(f){

varoptions={

//iframe:true,

dataType:'xml',//或'script',不能用'json',这种方式在三种浏览器中都不行,即回调函数不执行

type:'post',

//url:'bid/bidding/biddingAction_saveBaseInfo.action',

url:f.action,

beforeSubmit:showRequest,//pre-submitcallback

success:showResponse,//post-submitcallback

//clearForm:true

//otheravailableoptions:

target:'#baseInfo_iframe'//targetelement(s)tobeupdatedwithserverresponse

//resetForm:true//resettheformaftersuccessfulsubmit

//$.ajaxoptionscanbeusedheretoo,forexample:

//timeout:3000

};

//$('#'+formId).ajaxForm(options);

$(f).ajaxSubmit(options);

}

//pre-submitcallback

functionshowRequest(formData,jqForm,options){

if($("#baseInfoForm").validationEngine({returnIsValid:true})){

returntrue;

}else{

returnfalse;

}

}

//post-submitcallback

functionshowResponse(response,statusText){

/*$(response).find("msg").each(function(){

alert($(this).text());

});*/

varstrMsg=$(response).find("msg").first().text();

showMsg("ui-icon-circle-check",strMsg);

//alert("xxSS");

}

//-------------------endform---------------------------------

//显示提示信息

functionshowMsg(iconClass,msg,w,h){

$("#dialog-modal").html("<p><spanclass=\"ui-icon"+iconClass+"\"style=\"float:left;margin:07px50px0;\"></span>"+msg+"</p><br/>");

$("#dialog-modal").dialog({

position:'top',

width:w?w:200,

height:h?h:150,

modal:true

});

}

</script>

html表单:

<iframeid="baseInfo_iframe"name="baseInfo_iframe"style="display:none;"frameborder="0"src=""></iframe>

<formenctype="multipart/form-data"method="post"target="baseInfo_iframe"

action="bid/bidding/biddingAction_saveBaseInfo.action"

id="baseInfoForm"class="formular"onsubmit="javascript:submitForm(this);returnfalse;">

.......

<inputtype="file"name="upload"id="upload"class="multi"maxlength="1"accept=""size="20"/>

.......

</form>

注:为了在IE下能能成功地执行success定义的回调函数,以下一点很重要:定义form的target="baseInfo_iframe"和一个隐藏的iframe。没有这个的话,在IE下不会调用回调函数的!

Server端:

struts2action代码:

publicStringxxx()throwsException{

...

getResponse().setCharacterEncoding("UTF-8");

/*回应报头的类型很重要,试验结果是:

*客户端设xml时,server回应报头应该是application/xml(如果是text/html,chrome和FF可以,IE不行);

*客户端设script时,server回应报头应该是text/html;

*/

getResponse().setHeader("Content-Type","text/html");

//Stringstr="{msg:'"+getText("opt.suc")+"'}";//客户端声明为json

Stringstr="<msg>"+getText("opt.suc")+"</msg>";//客户端声明为xml

//Stringstr="showMsg(\"ui-icon-circle-check\",\""+getText("opt.suc")+"\");";//客户端声明为script

System.out.println("<<:"+str);

getResponse().getWriter().print(str);

returnnull;

}

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xyzroundo/archive/2011/01/18/6149838.aspx

相关推荐