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>
按 Ctrl+C 复制代码
如何异步跨域提交表单呢?
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>
补充：方法1不能实现跨越提交。
注意：输出json格式{'a1','a1value','a2':'a2value'}
字符必须用引号包住，数字可以不加引号。如：{'a1',10,'a2':20}
function sj1()
{ document.getElementById('f1').submit(); //提交表单
}
//创建iframe
window.onload= function()
{ var iframe;
try {
iframe = document.createElement('<iframe name="fileUploaderEmptyHole" style="hidden:true;"></iframe>');
} catch (ex) {
iframe = document.createElement('iframe');
}
//document.getElementById('f1').target = 'fileUploaderEmptyHole';
iframe.id = 'fileUploaderEmptyHole';
iframe.name = 'fileUploaderEmptyHole';
document.body.appendChild(iframe);
}
<form id="f1" action="uploadSave.do" method="post"
enctype="multipart/form-data">
<input type=file id="file" onchange="javascript: sj1();" name="upload" >
<input type="submit" value="上传" " id="btUpload" name="btUpload" />
</form>
分享到：
相关推荐
基于jquery的实现异步跨域提交表单的实现代码，需要的朋友可以参考下。
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
JQuery 的 AJAX 功能是实现异步数据交互的核心部分，对于跨域提交参数和接收 JSON 数据的需求，JQuery 提供了多种解决方案。 首先，JQuery 的 AJAX 功能可以使用 `$.post()` 方法来发送 POST 请求，该方法可以取代...
这个跨域异步上传功能我们借助了Jquery.form插件，它在异步表单方面很有成效，而跨域我们会在HTTP响应头上添加access-control-allow-method，当然这个头标记只有IE10，火狐和谷歌上支持，对于IE10以下的浏览器来说，...
这个跨域异步上传功能我们借助了Jquery.form插件，它在异步表单方面很有成效，而跨域我们会在HTTP响应头上添加access-control-allow-method，当然这个头标记只有IE10，火狐和谷歌上支持，对于IE10以下的浏览器来说，...
这个跨域异步上传功能我们借助了Jquery.form插件，它在异步表单方面很有成效，而跨域我们会在HTTP响应头上添加 access-control-allow-method，当然这个头标记只有IE10，火狐和谷歌上支持，对于IE10以下的浏览器来说...
异步请求类 作者：吾非无心 创建时间：2009.2 ——————————————————————————————————————————— 修改记录： 2009.4.27——添加 URL 检测功能，如果是...
在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。 一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只因为需要ajax功能而引入Jquery比较不划算...
在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。 一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只需要ajax功能，这样引入Jquery比较不划算...
Jquery.form.js可以非常简单的实现表单的异步提交，相对于同样是异步上传的ajaxfileupload，它能够实现文件跨域上传。
validform_v5.3.2 远程验证支持跨域 一行代码搞定整站的表单验证
后台框架:springboot 2.7.0+Flowable6.7.2+ mybaits+maven+接囗前端页面:html +vuejs 形式jquery ajax 异步跨域json 格式数据交互 前后分离，前后台分开部署(特别注意，前端用的vue.js,就是html页面引入vue.js形式，...
java8集合源码顶级 Java Github 存储库 基于以下是按星数排序的前 200 个 Java ...表单文件上传的服务器端平台（Google App Engine、PHP、Python、Ruby on Rails、Java 等）。 JavaScript 28459 769
支持表单参数和文件上传，支持PUT文件上传。解析成功后返回HttpRequest和HttpResponse。除常见的接口请求返回外，HttpResponse可以向客户端发送跨域请求结果，也可以发送文件，支持区分附件模式。 三：特点 纯Java ...
协议：文件上传使用html表单上传协议 上传：web可以flash跨域直接上传文件，后台可以通过SDK上传文件 文件存储：服务端没有Name Server，上传文件都会重命名随机字符，两层文件夹结构，客户端直接 GET 文件，无需...
多方案集成（模板系统、可组合的模块化开发、单页系统按需载入、基于配置的跨域异步请求等） 可自由定制的产品发布（按平台定制、按功能定制） 工具支持（NEJ工具集、NEI工具集等） 新技术整合（对于高端目标平台...
多方案集成（模板系统、可组合的模块化开发、单页系统按需载入、基于配置的跨域异步请求等） 可自由定制的产品发布（按平台定制、按功能定制） 工具支持（NEJ工具集、NEI工具集等） 新技术整合（对于高端目标平台...
12.7 12.6 从周一开始准备 编译原理 考试。 真的是一个令人难受的考试呢，绝对是我大学学过最难的一门课了，幸好已经完成了。 今天主要是把登录的所有写完了。...今天加入表单信息的提取，准备下一步做表单验证。
12.2 用Node实现异步I/O 第二部分 客户端JavaScript 第13章 Web浏览器中的JavaScript 13.1 客户端JavaScript 13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全...