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 div 遮罩层封锁整个页面
Jul 10 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
星际中的相关伤害
2020/03/04 星际争霸
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python基础 range的用法解析
2019/08/23 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python3中编码获取网页的实例方法
2020/11/16 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
军训自我鉴定
2013/12/14 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
青年志愿者活动感想
2015/08/07 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python