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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
Vue中的$set的使用实例代码
Oct 08 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php递归创建目录的方法
2015/02/02 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python操作mysql数据库
2017/03/05 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python操作excel的方法
2018/08/16 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
九州传奇上机题
2014/07/10 面试题
课程设计心得体会
2013/12/28 职场文书
文科生自我鉴定
2014/02/15 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年消防工作总结
2015/04/24 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js