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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
Javascript中的Split使用方法与技巧
Mar 09 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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实现操作redis的封装类完整实例
2015/11/14 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
javascript中this指向详解
2016/04/23 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python自定义类并使用的方法
2015/05/07 Python
Python实现八大排序算法
2016/08/13 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
PyTorch中permute的用法详解
2019/12/30 Python
python 录制系统声音的示例
2020/12/21 Python
python实现经典排序算法的示例代码
2021/02/07 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
销售团队激励口号
2014/06/06 职场文书
新郎新娘答谢词
2015/01/04 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Node实现搜索框进行模糊查询
2021/06/28 Javascript
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL