jquery.form.js外掛中ajaxSubmit提交在jquery1.4版本中的應用
作者：xyzroundo
下以處理的是對含有 <input type"file" /> 元素的表單，利用jquery.form 的ajaxSubmit方法進行類似ajax提交的應用情況：
注：發果用jquery1.3.2版本與jquery.form.js使用的話，沒什麼問題照官方文件說明就OK的；但如果用jquery1.4.x的話，就存在諸多奇怪的問題，解決的很久才取出以下解決方案！
相容firefox,chrome,IE7/8的最終程式碼：
客戶端：
引用檔案：
<script src="js/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_plugins/form/jquery.form.js"></script>
js程式碼：
<script type="text/javascript">
//-------------------form---------------------------------
//表單的非同步提交
function submitForm(f){
var options = {
//iframe:true,
dataType:'xml', // 或'script'，不能用'json'，這種方式在三種瀏覽器中都不行，即回撥函式不執行
type:'post',
//url: 'bid/bidding/biddingAction_saveBaseInfo.action',
url: f.action,
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
//clearForm:true
// other available options:
target: '#baseInfo_iframe' // target element(s) to be updated with server response
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
//$('#'+formId).ajaxForm(options);
$(f).ajaxSubmit(options);
}
// pre-submit callback
function showRequest(formData, jqForm, options) {
if($("#baseInfoForm").validationEngine({returnIsValid:true})){
return true;
}else{
return false;
}
}
// post-submit callback
function showResponse(response, statusText) {
/* $(response).find("msg").each(function(){
alert($(this).text());
});*/
var strMsg=$(response).find("msg").first().text();
showMsg("ui-icon-circle-check",strMsg);
//alert("xxSS");
}
//-------------------end form---------------------------------
//顯示提示資訊
function showMsg(iconClass,msg,w,h){
$( "#dialog-modal" ).html("<p><span class=/"ui-icon "+iconClass+"/" style=/"float:left; margin:0 7px 50px 0;/"></span>"+msg+" </p><br />");
$( "#dialog-modal" ).dialog({
position: 'top',
width: w?w:200,
height: h?h:150,
modal: true
});
}
</script>
html表單：
<iframe id="baseInfo_iframe" name="baseInfo_iframe" style="display: none;" frameborder="0" src=""></iframe>
<form enctype="multipart/form-data" method="post" target="baseInfo_iframe"
action="bid/bidding/biddingAction_saveBaseInfo.action"
id="baseInfoForm" class="formular" onsubmit="javascript:submitForm(this);return false;">
.......
<input type="file" name="upload" id="upload" class="multi" maxlength="1" accept="" size="20"/>
.......
</form>
注：為了在IE下能能成功地執行 success 定義的回撥函式，以下一點很重要：定義form的 target="baseInfo_iframe" 和一個隱藏的iframe。沒有這個的話，在IE下不會呼叫回撥函式的!
Server端：
struts2 action程式碼：
public String xxx() throws Exception{
...
getResponse().setCharacterEncoding("UTF-8");
/*迴應報頭的型別很重要，試驗結果是：
* 客戶端設xml時，server迴應報頭應該是 application/xml （如果是text/html，chrome和FF可以，IE不行）；
* 客戶端設script時，server迴應報頭應該是 text/html ；
*/
getResponse().setHeader("Content-Type", "text/html");
//String str="{msg:'"+getText("opt.suc")+"'}"; //客戶端宣告為json
String str="<msg>"+getText("opt.suc")+"</msg>"; //客戶端宣告為xml
//String str="showMsg(/"ui-icon-circle-check/",/""+getText("opt.suc")+"/");"; //客戶端宣告為script
System.out.println("<<:"+str);
getResponse().getWriter().print(str);
return null;
}