jquery下异步提交表单 异步跨域提交表单


Posted in Javascript onNovember 17, 2010

1.使用post提交方式
2.构造表单的数格式
3.结合form表单的submit调用ajax的回调函数。
使用 jQuery 异步提交表单代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<script src="js/jquery-1.4.2.js"></script> 
<script> 
jQuery(function($) { 
// 使用 jQuery 异步提交表单 
$('#f1').submit(function() { 
$.ajax({ 
url: 'ta.aspx', 
data: $('#f1').serialize(), 
type: "post", 
cache : false, 
success: function(data) 
{alert(data);} 
}); 
return false; 
}); 
}); 
</script> 
<body> 
<form id="f1" name="f1"> 
<input name="a1" /> 
<input name="a2" /> 
<input id="File1" type="file" name="File1"/> 
<input id="Submit1" type="submit" value="submit" /> 
</form> 
</body> 
</html>

如何异步跨域提交表单呢?
1.利用script 的跨域访问特性,结合form表单的数据格式化,所以只能采用get方式提交,为了安全,浏览器是不支持post跨域提交的。
2.采用JSONP跨域提交表单是比较好的解决方案。
3.也可以动态程序做一代理。用代理中转跨域请求。
使用 jQuery 异步跨域提交表单代码:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<script src="js/jquery-1.4.2.js"></script> 
<script> 
jQuery(function($) 
{ 
// 使用 jQuery 异步跨域提交表单 
$('#f1').submit(function() 
{ 
$.getJSON("ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?", 
function(data) 
{ 
alert(data); 
}); 
return false; 
}); 
}); 
</script> 
<body> 
<form id="f1" name="f1"> 
<input name="a1" /> 
<input name="a2" /> 
<input id="File1" type="file" name="File1"/> 
<input id="Submit1" type="submit" value="submit" /> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
JS 5种遍历对象的方式
Jun 16 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 #Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 #Javascript
div层的移动及性能优化
Nov 16 #Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
javascript Array对象基础知识小结
Nov 16 #Javascript
You might like
PHP新手上路(七)
2006/10/09 PHP
PHP中的use关键字概述
2014/07/23 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python 探针的实现原理
2016/04/23 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
详解Python自建logging模块
2018/01/29 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python循环实现n的全排列功能
2019/09/16 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
委托协议书范本
2014/04/22 职场文书
计划生育责任书
2015/05/09 职场文书
家长会主持词开场白
2015/05/29 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
情况说明书怎么写
2015/10/08 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技