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的最终代码：

客户端：

引用文件：

js代码：

//-------------------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表单：

<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;">

.......

.......

</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插件中ajaxSubmit提交在jquery1.4版本中的应用相关推荐

JQuery.form.js插件的简单使用
其实就是用ajax提交表单,但是不想让他跳转页面所以选用ajax提交表单.我也不知道为什么,难道是因我里面的数据太多了?不应该啊...总之我的表单没有序列化的功能!对,就是这样.所以我就选用了人家的小 ...
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
form提交--jquery.form.js
jquery.form.js 官网 http://www.malsup.com/jquery/form/ 先写一个简单的form,提交后在后台打印参数. formsubmit.jsp <%@ ...
【jQuery】使用jquery.form.js，获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
使用jquery.form.js实现form表单无刷新提交简单示例
2019独角兽企业重金招聘Python工程师标准>>> 直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代 ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
jQuery.form.js使用
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...

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

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

最新文章

热门文章