作者：xyzroundo

?

下以處理的是對含有 <input type"file" ?/> 元素的表單，利用jquery.form 的ajaxSubmit方法進行類似ajax提交的應(yīng)用情況：

注：發(fā)果用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'，這種方式在三種瀏覽器中都不行，即回調(diào)函數(shù)不執(zhí)行

? ?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" οnsubmit="javascript:submitForm(this);return false;">

?

.......

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

.......

?

</form>

?

注：為了在IE下能能成功地執(zhí)行 success 定義的回調(diào)函數(shù)，以下一點很重要：定義form的?target="baseInfo_iframe" 和一個隱藏的iframe。沒有這個的話，在IE下不會調(diào)用回調(diào)函數(shù)的!

?

Server端：

struts2 action代碼：

public String ?xxx() throws Exception{

...

?

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

/*回應(yīng)報頭的類型很重要，試驗結(jié)果是：

??* 客戶端設(shè)xml時，server回應(yīng)報頭應(yīng)該是?application/xml ?（如果是text/html，chrome和FF可以，IE不行）；

??*?客戶端設(shè)script時，server回應(yīng)報頭應(yīng)該是?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;

}

?

?

?

總結(jié)

以上是生活随笔為你收集整理的jquery.form.js插件中ajaxSubmit提交在jquery1.4版本中的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。