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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
jquery indexOf使用方法
Aug 19 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
js仿360开机效果
Dec 26 Javascript
express异步函数异常捕获示例详解
Nov 30 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获取url参数方法总结
2014/11/13 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
基于python实现复制文件并重命名
2020/09/16 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
Python之多进程与多线程的使用
2021/02/23 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
市场营销求职信范文
2014/02/21 职场文书
投标担保书范文
2014/04/02 职场文书
师范类求职信
2014/06/21 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
工作表扬信
2015/01/17 职场文书
党支部评议意见
2015/06/02 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL