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

下以处理的是对含有 <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;

}



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

评论

1 楼 曾老师 2012-09-18  

action 为什么要 return null?