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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
js时间控件只显示年月
Jan 08 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
JS实现滑动导航效果
Jan 14 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 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
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python将回车作为输入内容的实例
2018/06/23 Python
python读取文本中的坐标方法
2018/10/14 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python如何将字符串转换为日期
2020/07/31 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
五好党支部事迹材料
2014/02/06 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
通知怎么写?
2019/04/17 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL