`

AJAX与双FORM提交

阅读更多

现在是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()来调用进行提交返回后 的处理

分享到:
评论
7 楼 fzfx88 2007-04-23  
没太看懂
6 楼 guanfish 2007-04-23  
to HexUzHoNG
你们的处理方法跟我的是同一个道理啊,只是你们在提交form时,动态生成一个iframe啊,我只是预先生成好了罢了,不过你们那样的做法,就可以做成一个通用的js供大家调用了。学习到
5 楼 guanfish 2007-04-23  
事实上form2和form1都是在同一个页面中,但是form2的target指向了那个隐藏的iframe,这样form2在提交时,返回页面将会在隐藏的iframe里生成,而当前页面并不会刷新
4 楼 winterwolf 2007-04-21  
用xform比较简单.

如果浏览器不支持可以用 formfaces 一个用javascript实现的xform
formfaces.js 不到100K

http://www.formfaces.com/
3 楼 cozone_柯中 2007-04-20  
dengyin2000 写道
你的form2是放在一个隐藏的iframe中?

如果form1和form2在同一个页面,调用form2.submit不是一样会刷新页面吗?




他的意思是form2 提交到 一个iframe里面作为文件上传,

那 form1 提交 页面还是会跳转....
2 楼 HexUzHoNG 2007-04-20  
没太看懂,为什么要返回一个空白页面blank.jsp?

就一个上传页面,和原来上传一种写法。
自己写事件处理上传方法,取得页面中form
在form中插入iframe
取得form中src地址
将iframe的src设为form的src

在那个页面处理页面onload事件,判断有没有出错。。。


这样说起来看似有些麻烦,但封装好后,基本上不要其它开发人员写什么js了,偶们公司就是这么处理的
1 楼 dengyin2000 2007-04-20  
你的form2是放在一个隐藏的iframe中?

如果form1和form2在同一个页面,调用form2.submit不是一样会刷新页面吗?


相关推荐

    EXT异步提交FORM表单

    EXT异步提交FORM表单的核心是通过Ajax技术实现表单数据的后台提交,而无需刷新整个页面。这种方式的主要优点在于能够提供更加流畅的用户交互体验,同时减少了服务器端的负载压力。 ##### 2.2 实现步骤 1. **初始化...

    Vue form 表单提交+ajax异步请求+分页效果

    Vue 表单提交、Ajax 异步请求和分页效果详解 在本篇文章中,我们将详细介绍 Vue 表单提交、Ajax 异步请求和分页效果的实现方法。这些技术是 Web 开发中常用的技术,能够提高用户体验和网站性能。 一、Vue 表单提交...

    ajax实现聊天室

    在上述代码中,我们监听了表单的提交事件,获取用户输入的消息,然后通过Ajax向服务器发送POST请求。请求头设置为JSON类型,因为我们假设服务器期望接收JSON格式的数据。当服务器响应时,我们更新聊天记录,将新接收...

    ajax 多年收集资料(15个教学文档和应用实例)

    Ajax的核心是JavaScript对象XMLHttpRequest,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。此外,尽管名字中包含XML,但实际传输的数据格式不仅限于XML,还可以是JSON、HTML或其他格式。 ##...

    自动生成式form表单

    AJAX(Asynchronous JavaScript and XML)技术使得form表单可以异步提交,不会刷新整个页面,提高交互性。通过XMLHttpRequest对象,可以实现后台与服务器的通信。 **6. CSS与表单美化:** 利用CSS(层叠样式表)...

    Ext2.0 form使用实例的例程

    7. **表单提交(Form Submission)**:表单可以以两种方式提交:异步(Ajax)或同步(传统的HTTP请求)。异步提交在后台处理数据,不会刷新整个页面,提供了更好的用户体验。 8. **自定义组件(Custom Components)...

    WEB2.0 Ajax简单留言板

    Ajax是一种在后台与服务器进行数据交换的技术,通过JavaScript实现异步通信。其基本原理是创建XMLHttpRequest对象,利用该对象发送HTTP请求并接收响应。Ajax的优势在于它可以仅更新部分网页内容,而无需重新加载整个...

    ext控件form相关配置

    5. **提交处理**:支持AJAX提交和其他形式的数据提交操作。 #### 三、Form控件基本配置 在Ext JS中创建一个基本的`Form`控件通常涉及以下步骤: 1. **定义表单容器**: ```javascript Ext.create('Ext.form....

    angular-form.7z

    2. **表单提交**:通过监听`ngSubmit`事件处理表单的提交,通常会阻止默认的提交行为并发送AJAX请求到服务器。 3. **表单状态管理**:`form.valid`, `form.touched`, `form.dirty`等属性可以用来检查表单的状态,...

    ajax study

    Ajax广泛用于网页动态更新、表单提交、分页加载、实时聊天、地图应用等场景。 ### 8. jQuery 的 AJAX 方法 jQuery 提供了更简洁的 AJAX API,如`$.ajax()`、`$.get()`、`$.post()`等。例如,使用`$.get()`发送GET...

    AJAX中文版的开发手册

    1. **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信,而不影响用户对网页的交互。 2. **请求与响应**:通过XMLHttpRequest创建HTTP请求,发送到服务器,服务器处理请求后...

    Ajax原理及例题

    - **表单验证**:在提交表单前,通过Ajax验证用户输入的有效性,减少不必要的页面跳转。 - **分页加载**:网页滚动到底部自动加载更多内容。 - **异步上传**:在后台上传文件,不影响用户在页面上的其他操作。 - **...

    异步 提交表单请求

    在Java开发中,异步提交表单请求是一种常见的前端与后端交互方式,它通过Ajax技术实现,使得用户无需等待整个页面刷新即可完成数据的提交和获取,提升了用户体验。Ajax,全称Asynchronous JavaScript and XML(异步...

    前端经典——ajax前后数据交互.rar

    在前端开发中,Ajax(Asynchronous JavaScript and XML)是一种核心技术,它允许Web应用程序在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这个技术的出现极大地提升了用户体验,因为它使得网页能够...

    AJAX-Introduction.zip_zip

    例如,`Content-Type`头用于指定发送的数据类型,常见的有`application/x-www-form-urlencoded`(默认的表单提交格式)、`application/json`和`text/xml`。 ### 5. 浏览器兼容性 早期的Ajax实现依赖于Internet ...

    ajax异步登录

    在用户与网页交互时,Ajax 可以向服务器发送异步请求,获取数据并局部更新页面,提供更加流畅、高效的用户体验。在“Ajax异步登录”场景中,这一技术被广泛应用,使得用户在不离开当前页面的情况下完成登录操作,...

    Extjs4--Form登录功能,结合struts2

    **四、表单提交与处理** 1. **异步提交**:使用ExtJS的`form.submit`方法,可以实现Ajax方式的表单提交,无需刷新整个页面。 2. **处理响应**:Struts2将返回JSON或XML格式的结果,ExtJS可以解析这些响应,根据返回...

    flash简单的表单提交程序

    因此,虽然Flash的表单提交技术对于历史项目仍有价值,但在新项目中,推荐使用HTML5的表单元素和AJAX技术来实现类似功能。 六、示例分析 在提供的压缩包文件"flash_mail_form_2224"中,很可能是包含了一个简单的...

Global site tag (gtag.js) - Google Analytics