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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
javascript数据类型详解
Feb 07 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
详解vue中移动端自适应方案
May 05 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
Javascript 二维数组
2009/11/26 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
详解python中的Turtle函数库
2018/11/19 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
大学生就业自我鉴定
2013/10/26 职场文书
2014年元旦活动方案
2014/02/15 职场文书
酒店端午节促销方案
2014/02/18 职场文书
安全生产活动月方案
2014/03/09 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
面试自我评价范文
2014/09/17 职场文书
企业2014年度工作总结
2014/12/10 职场文书
同学聚会通知短信
2015/04/20 职场文书
村官2015年度工作总结
2015/10/14 职场文书
2016国庆促销广告语
2016/01/28 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android