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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php扩展开发入门demo示例
2019/09/23 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python交互式图形编程实例(三)
2017/11/17 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python实现飞机大战游戏
2020/10/26 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
物流专员岗位职责
2014/02/17 职场文书
教师求职自荐信
2014/03/09 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python