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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
复制js对象方法(详解)
Jul 08 Javascript
javascript实现获取服务器时间
May 19 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
python常见的格式化输出小结
2016/12/15 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python中遍历列表的方法总结
2019/06/27 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
预备党员公开承诺书
2014/05/28 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python