jquery.form.js插件中ajaxSubmit提交在jquery1.4版本中的应用
ajaxDreamer 2011-03-01
下以处理的是对含有<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
