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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
jQuery实现元素的插入
Feb 27 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP微信API接口类
2016/08/22 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python如何实现动态数组
2019/11/02 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用python实现飞机大战游戏
2020/03/23 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
中层干部岗位职责
2013/12/18 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
人民币使用说明书
2019/04/17 职场文书
七年级作文之环保作文
2019/10/17 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python