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

原创 2011年01月18日 15:14:00

作者: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;

}

 

 


 

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http:/...
  • liuao107329
  • liuao107329
  • 2015年06月10日 11:13
  • 1042

ajax上传图片所用jquery.form.js插件详细使用方法

ajax上传图片所用jquery.form.js插件详细使用方法一、html中有submit提交按钮时 1、添加一个表单页面。 只是一个正常的形式,不需要特殊的标记: Name: ...
  • qq_26291823
  • qq_26291823
  • 2016年11月25日 18:46
  • 1578

jquery form插件是用于在页面使用ajax上传表单、文件,不刷新

jquery form插件是用于在页面使用ajax上传表单、文件,不刷新的功能,直接开始例子:   有两种方式: ajaxForm 和ajaxSubmit ,前者直接在文档加载完成之后绑定...
  • u012767263
  • u012767263
  • 2014年03月14日 17:00
  • 1033

jquery.form.js失效问题。

项目中引用 jquery.form.js插件。 打算用      .ajaxForm(options);    方式提交到后台,但是发现  .ajax 是可以正常交互的,但是  .ajaxform ...
  • u012246342
  • u012246342
  • 2016年08月22日 14:31
  • 2409

jQuery.form插件源码分析

jQuery.form插件(Jquery.form.js 官网),可以让我们非常简单的实现表单的异步提交、实现文件上传、进度条显示等等功能。   1.         $(“form1”).aja...
  • sd4015700
  • sd4015700
  • 2014年12月06日 23:28
  • 876

【js】Ajax提交form表单(ajaxSubmit使用讲解 )

1 、引入依赖脚本    //ajaxForm 依赖脚本 脚本下载地址  http://download.csdn.net/detail/yjqyyjw/9488464 ...
  • yjqyyjw
  • yjqyyjw
  • 2016年04月12日 14:07
  • 9092

使用jquery.form.js的ajaxsubmit方法提交数据的Bug

周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考:   先把问题描述一下,做的功...
  • explorercn
  • explorercn
  • 2013年08月23日 17:32
  • 2259

jQuery使用ajaxSubmit()提交表单以及AjaxSubmit的一些用法

作为一个Java新人工作的一些总结和笔记,有什么不对的欢迎批评指导。
  • baidu_29119747
  • baidu_29119747
  • 2016年05月13日 15:26
  • 25836

使用jQuery.form插件实现表单异步提交+上传文件

1、前端代码 1 2 html> 3 head> ...
  • yc1022
  • yc1022
  • 2014年03月11日 10:27
  • 5012

jquery.form.js IE下异步提交文件的问题解决办法

jquery.form IE下文件上传问题
  • ldz_wolf
  • ldz_wolf
  • 2016年10月31日 23:41
  • 2827
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery.form.js插件中ajaxSubmit提交在jquery1.4版本中的应用
举报原因:
原因补充:

(最多只允许输入30个字)