需求:在一个页面(iframe.html)中点击“请导入补充信息
”,跳转到另个页面(upload.html)。现在不想让它跳转到这个upload.html页面,而是直接在
iframe.html
页面中显示出来进行处理。
刚开始我的第一反应是想到ajax, 最终实现是可以的,但要处理该跳转页面中的内容时,还是会跳转
之前ifram.html
<a href="upload.do?orderId=<bean:write name="orderId" />&orderType=<bean:write name="orderType" />" target="blank"
>请导入补充信息</a>
稍微改动下
iframe.html:
<div>
<a href="upload.html" target="importInfos"
>请导入补充信息</a>
</div>
<iframe id="importInfos" name="importInfos" frameborder="0" width="800px" height="400px"></iframe>
upload.html:
<fieldset>
<br>
<legend>补充信息导入</legend>
<label for="_control_areaName" class="dialog_label">文件上传:</label>
<input type="file" name="file" value="">
<input id="btnUpload" type="submit" value="导入">
<br><br>
<font color="#FF6666"> 备注:
<ul>
<li>文件模板:<a href="#" target="_blank">业务信息补充模板</a>
<li>字段说明:
申请单位名称:发起新增、变更、撤销流程的单位名称,如:XXX<br>
接入单位名称:接入单位名称包括申请单位及其申请中涉及的单位名称,如:XXX<br>
联系人:各个接入单位联系人姓名<br>
电话:接入单位联系人电话<br>
邮箱:联系人邮箱<br>
接入范围\接入应用名称:如:2008-8-28 23:00:00<br>
</ul>
</font>
</fieldset>
简单的AJAX例子详解
http://liangq.iteye.com/admin/blogs/994702/
更多的请参考
http://liangq.iteye.com/
分享到:
相关推荐
结合两者,AJAX与iframe可以实现异步文件上传,这种方法特别适用于处理大文件或需要在上传过程中显示进度的场景。下面将详细介绍这一技术。 首先,为什么需要使用AJAX与iframe进行文件上传呢?传统的表单提交方式会...
### 使用隐藏的Iframe实现Ajax无刷新上传 在Web开发中,实现文件的无刷新上传是一种常见的需求。本文将详细介绍如何通过使用隐藏的Iframe来实现这一功能,并结合所提供的代码片段进行具体分析。 #### 一、原理概述...
本文将深入探讨如何使用IFrame来实现AJAX的文件上传功能,这在某些场景下是必要的,比如处理IE浏览器的兼容性问题或者上传大文件时。 首先,让我们理解为什么需要IFrame来处理文件上传。传统的AJAX文件上传在现代...
四、Ajax与IFrame结合 在实际应用中,Ajax和IFrame可以结合起来,通过监听IFrame的load事件,获取上传完成后的响应。当IFrame中的页面加载完成后,可以解析其内容,提取服务器返回的信息,再通过Ajax调用来更新前端...
iframe式ajax调用</title> </head> <body> <form action=’b.php’ method=’post’ name=” id=” target=’formTarget’> <input type=’text’ name=’username’ id=” placeholder=...
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 ...
在本文中,我们将深入探讨如何使用jQuery和iframe技术来实现一个AJAX文件上传的效果。这种方法在处理文件上传时尤其有用,因为传统的AJAX不支持文件的POST操作。通过结合jQuery和iframe,我们可以创建一个无刷新的...
- `name`: 为iframe设置名称,用于与其他元素交互,如`window.frames`或`form.target`。 - `sandbox`: 提供额外的安全特性,如禁止脚本执行、禁止窗口弹出等。 - `seamless`: 使iframe与父页面样式融合,看起来更...
**二、iframe与导航栏的结合** 在本例中,我们使用`iframe`与Bootstrap的导航组件配合,实现点击导航栏时,无刷新切换页面内容。Bootstrap是一个流行的前端开发框架,提供了丰富的预设样式和组件,如响应式导航栏,...
- `name`:为iframe指定一个名称,用于在JavaScript中引用或者在`<a>`标签的`target`属性中设定目标框架。 - `sandbox`:用于限制iframe中的内容可以执行的行为,如禁止脚本、禁止弹窗等。 - `seamless`:使iframe尽...
在 AJAX 出现之前,Web 开发人员就已经能够通过使用 iframe 来实现页面的部分刷新,尤其是对于文件上传这类操作而言。然而,随着 AJAX 的普及,更多的开发者转向了这种更为灵活和现代化的技术。 #### 使用 iframe ...
这种方式简单易懂,但是需要注意的是,由于浏览器的安全策略限制,如果`iframe`与父页面不在同一个域下,则可能会因为同源策略而无法执行该操作。 ##### 方法二:使用HTML表单的`target`属性 这种方法适用于`iframe...
虽然用户看不到`iframe`的内容,但我们可以通过JavaScript与`iframe`进行交互,获取服务器的响应。例如,通过获取`iframe`的`contentDocument`或`contentWindow`对象,可以读取其`src`属性或访问DOM,从而得知上传...
iframe式ajax调用</title> </head> <body> <form action=’b.php’ method=’post’ name=” id=” target=’formTarget’> <input type=’text’ name=’username’ id=” placeholder=...
### 知识点:Ajax无刷新提交表单与上传文件 #### 1. Ajax的基本概念 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许网页通过JavaScript与服务器交换数据并更新部分网页内容,而...
在现代Web开发中,文件上传是一项常见的功能,但当涉及到Ajax无刷新提交时,问题就会变得复杂。Ajax通常不支持处理multipart/form-data类型的表单,这是由于文件上传所需的格式。然而,通过使用隐藏的iframe,我们...