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 相关文章推荐
固定背景实现的背景滚动特效示例分享
May 19 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
小程序实现上下切换位置
Nov 16 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
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
Js的MessageBox
2006/12/03 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python学习之用pygal画世界地图实例
2017/12/07 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
热能动力工程毕业生自荐信
2013/11/07 职场文书
历史系自荐信范文
2013/12/24 职场文书
学生党员公开承诺书
2014/05/28 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
民政局未婚证明
2015/06/15 职场文书
退休欢送会主持词
2015/07/01 职场文书
篮球拉拉队口号
2015/12/25 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers