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实现异步提交表单时，可以利用`.submit()`和`$.ajax()`方法，而异步跨域提交则可以通过JSONP或代理服务器的方式实现。由于浏览器同源策略的限制，跨域提交需要特别的处理。JSONP是一种简便的方法，但它的...
在Web开发中，异步表单提交是一种常见需求，它能提供更好的用户体验，因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、...
下面我们将详细探讨异步表单请求的实现原理、步骤以及在Java中的应用。 1. **异步请求的工作原理** 异步请求的核心在于，浏览器不会阻塞其他任务，而是创建一个新的请求并在后台处理。当服务器返回响应时，...
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中，异步提交表单是一种常见的技术手段，它能够提升用户体验，减少页面刷新带来的数据丢失风险，并能有效提高系统的响应...
AjaxForm是jQuery Form Plugin的一个功能，用于实现异步表单提交，特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先，让我们了解什么是Ajax。AJAX（Asynchronous ...
使用`XMLHttpRequest`对象或现代浏览器支持的`fetch` API，我们可以实现表单的异步提交。例如，使用jQuery库的Ajax提交： ```javascript $('#myForm').submit(function(event) { event.preventDefault(); // 阻止...
Java Web中的Ajax异步提交方式上传文件是一种常见且高效的用户交互技术，它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。本项目利用Maven构建，前端使用jQuery库以及jQuery-form插件，后端则采用...
在现代Web开发中，文件跨域异步上传是一项常见的需求，尤其在用户交互丰富的Web应用中。HTML5引入了一系列新特性，使得这项任务变得更加高效和便捷。本篇将重点讲解如何利用HTML5的`postMessage`和`iframe`技术来...
JQuery.form插件能够处理异步表单提交，让前端页面无需刷新即可上传文件，从而提升用户体验。在实现跨域上传时，一般会在HTTP响应头上添加特定的控制选项。在现代浏览器如IE10、火狐和谷歌中，可以通过在响应头中...
1. jQuery异步提交表单的概念：在网页开发中，异步提交表单是通过Ajax技术来实现的，这意味着可以在不重新加载整个页面的情况下，将表单数据发送到服务器，并接收服务器的响应。这种方式可以提高用户体验，因为它...
### AJAX提交表单知识点详解 #### 一、概述 在Web开发中，异步JavaScript与XML（Asynchronous JavaScript and XML，简称AJAX）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器...
无刷新提交表单的核心是利用Ajax（异步JavaScript和XML）技术。Ajax允许我们在后台与服务器交换数据并局部更新页面，而无需重新加载整个页面。这种技术依赖于浏览器提供的XMLHttpRequest对象或者现代浏览器的Fetch ...
JQuery 的 AJAX 功能是实现异步数据交互的核心部分，对于跨域提交参数和接收 JSON 数据的需求，JQuery 提供了多种解决方案。 首先，JQuery 的 AJAX 功能可以使用 `$.post()` 方法来发送 POST 请求，该方法可以取代...
在Web开发中，表单上传文件是一种常见的功能。而跨域异步上传文件则是一种更为复杂的技术需求，它要求在一个域的页面上发起对另一域资源的请求并完成文件上传。这种技术涉及到前端的异步文件上传处理以及后端的跨域...
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
在网页开发中，异步无刷新提交是一种提升用户体验的重要技术，它使得用户在提交表单或执行某些操作时，无需等待整个页面刷新，而是仅更新部分网页内容。本主题聚焦于利用`iframe`来实现这一功能，这在不支持现代Ajax...
这个插件专门用于处理异步表单提交，使得文件上传变得更加方便。在使用前，需要确保已经正确地引入了jQuery库和jQuery.form插件的脚本。 例如，创建一个包含文件输入字段的表单： ```html ()"> ``` 然后，使用...
传统的表单提交方式会刷新整个页面，而HTML5的File API允许我们在不刷新页面的情况下处理文件，实现异步上传，提供更好的交互性和实时反馈。 **HTML5 File API** HTML5 File API是一组接口，用于处理用户设备上的...
总结，使用jQuery的Ajax功能提交整个表单涉及的关键点包括：`serialize()`方法、`$.ajax()`或其简化版`$.post()`/`$.get()`、阻止表单默认提交、处理服务器响应以及跨域问题。理解这些概念和用法，能够帮助开发者在...