现在是AJAX横行的时代,也许已经很少有人用隐藏form提交来实现不刷新页面更新了。
在AJAX以前,一般都是用隐藏form提交来实现页面不刷新提交数据,虽然那时候我也常用xmlhttp提交来实现,不过现在ajax概念流行,不用一下总好像你跟不上时代似的,老总会问“你用了ajax了没有”。
现在来对比一下ajax与隐藏form提交的利与弊。
1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理;ajax则不用,可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是目前用隐藏form提交的主要用途。
现在接下来讲述如何通过隐藏form来实现文件上传
1)首先定义一个用于填写表单内容的form
<form name="form1"></form>
2)接着定义一个用于提交的form
<form name="form2" target="myIframe"> //用于指定提交返回的页面显示在这个隐藏的iframe中
<iframe name="myIframe" style="display:none"></iframe> //用于存放提交返回后的空白页面
<div id="formInner" style="display:none"></div> //用于获取form1的html内容,获得form1的表单元素
</form>
3)在form1提交时,进行如下javascript处理
var formInner= document.getElementById("formInner");
formInner.innerHTML = form1.innerHTML; //复制form1的html代码
form2.action = form1.action;
form2.submit();
4)提交后,进入后台处理,后台处理完成后,需要返回一个空白页面blank.jsp,这个页面是在隐藏的iframe中生成的,所以可以通过parent对象对原页面进行操作。
比如原页面定义了一个updatePageFromSubmit(),则在blank.jsp页面中可以通过parent.updatePageFromSubmit()来调用进行提交返回后 的处理
分享到:
- 2007-04-20 14:06
- 浏览 6457
- 评论(7)
- 论坛回复 / 浏览 (7 / 11090)
- 查看更多
相关推荐
EXT异步提交FORM表单的核心是通过Ajax技术实现表单数据的后台提交,而无需刷新整个页面。这种方式的主要优点在于能够提供更加流畅的用户交互体验,同时减少了服务器端的负载压力。 ##### 2.2 实现步骤 1. **初始化...
Vue 表单提交、Ajax 异步请求和分页效果详解 在本篇文章中,我们将详细介绍 Vue 表单提交、Ajax 异步请求和分页效果的实现方法。这些技术是 Web 开发中常用的技术,能够提高用户体验和网站性能。 一、Vue 表单提交...
在上述代码中,我们监听了表单的提交事件,获取用户输入的消息,然后通过Ajax向服务器发送POST请求。请求头设置为JSON类型,因为我们假设服务器期望接收JSON格式的数据。当服务器响应时,我们更新聊天记录,将新接收...
Ajax的核心是JavaScript对象XMLHttpRequest,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。此外,尽管名字中包含XML,但实际传输的数据格式不仅限于XML,还可以是JSON、HTML或其他格式。 ##...
AJAX(Asynchronous JavaScript and XML)技术使得form表单可以异步提交,不会刷新整个页面,提高交互性。通过XMLHttpRequest对象,可以实现后台与服务器的通信。 **6. CSS与表单美化:** 利用CSS(层叠样式表)...
7. **表单提交(Form Submission)**:表单可以以两种方式提交:异步(Ajax)或同步(传统的HTTP请求)。异步提交在后台处理数据,不会刷新整个页面,提供了更好的用户体验。 8. **自定义组件(Custom Components)...
Ajax是一种在后台与服务器进行数据交换的技术,通过JavaScript实现异步通信。其基本原理是创建XMLHttpRequest对象,利用该对象发送HTTP请求并接收响应。Ajax的优势在于它可以仅更新部分网页内容,而无需重新加载整个...
5. **提交处理**:支持AJAX提交和其他形式的数据提交操作。 #### 三、Form控件基本配置 在Ext JS中创建一个基本的`Form`控件通常涉及以下步骤: 1. **定义表单容器**: ```javascript Ext.create('Ext.form....
2. **表单提交**:通过监听`ngSubmit`事件处理表单的提交,通常会阻止默认的提交行为并发送AJAX请求到服务器。 3. **表单状态管理**:`form.valid`, `form.touched`, `form.dirty`等属性可以用来检查表单的状态,...
Ajax广泛用于网页动态更新、表单提交、分页加载、实时聊天、地图应用等场景。 ### 8. jQuery 的 AJAX 方法 jQuery 提供了更简洁的 AJAX API,如`$.ajax()`、`$.get()`、`$.post()`等。例如,使用`$.get()`发送GET...
1. **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信,而不影响用户对网页的交互。 2. **请求与响应**:通过XMLHttpRequest创建HTTP请求,发送到服务器,服务器处理请求后...
- **表单验证**:在提交表单前,通过Ajax验证用户输入的有效性,减少不必要的页面跳转。 - **分页加载**:网页滚动到底部自动加载更多内容。 - **异步上传**:在后台上传文件,不影响用户在页面上的其他操作。 - **...
在Java开发中,异步提交表单请求是一种常见的前端与后端交互方式,它通过Ajax技术实现,使得用户无需等待整个页面刷新即可完成数据的提交和获取,提升了用户体验。Ajax,全称Asynchronous JavaScript and XML(异步...
在前端开发中,Ajax(Asynchronous JavaScript and XML)是一种核心技术,它允许Web应用程序在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这个技术的出现极大地提升了用户体验,因为它使得网页能够...
例如,`Content-Type`头用于指定发送的数据类型,常见的有`application/x-www-form-urlencoded`(默认的表单提交格式)、`application/json`和`text/xml`。 ### 5. 浏览器兼容性 早期的Ajax实现依赖于Internet ...
在用户与网页交互时,Ajax 可以向服务器发送异步请求,获取数据并局部更新页面,提供更加流畅、高效的用户体验。在“Ajax异步登录”场景中,这一技术被广泛应用,使得用户在不离开当前页面的情况下完成登录操作,...
**四、表单提交与处理** 1. **异步提交**:使用ExtJS的`form.submit`方法,可以实现Ajax方式的表单提交,无需刷新整个页面。 2. **处理响应**:Struts2将返回JSON或XML格式的结果,ExtJS可以解析这些响应,根据返回...
因此,虽然Flash的表单提交技术对于历史项目仍有价值,但在新项目中,推荐使用HTML5的表单元素和AJAX技术来实现类似功能。 六、示例分析 在提供的压缩包文件"flash_mail_form_2224"中,很可能是包含了一个简单的...