用Iframe实现Ajax无刷新效果
需求：实现一个页面的下拉框连动效果，要求无刷新。
看到需求的人，通常第一时间会想到用Ajax来实现。我展示的是一个通过Iframe实现无刷新效果。
例：你需要在a.jsp页面上实现连动下拉框！
a.jsp页面关键代码：
function getSelect(obj){
var ffrID = document.getElementById("ffrID");
ffrID.value=obj.value;
ffr.submit();
}
//需要连动的下拉框
<select name="a" onchange="getSelect(this)">
<option>....</option>
</select>
<div id="selectData"></div>
<form name="ffr" action="aaa.action" target="ffrIframe">
<input type="hidden" id="ffrID" name="ffrID" />
</form>
<iframe name="ffrIframe" src='b.jsp' height='0' width='0' bordercolor='#E2EBF6' frameborder="0" scrolling="no" height="100%" width="100%"/>
b.jsp页面关键代码：
window.onload=function(){
window.parent.document.getElementById("selectData").innerHTML = document.getElementById("selectDataStr").innerHTML;
}
<div id="selectDataStr">
<s:property value="selectStr" escape="false" />
</div>
用Iframe实现Ajax无刷新效果的整个流程：
用户选中select标签后，触发事件getSelect(obj).在事件中获得该select标签的选项值，赋给一个名为"ffrID"的隐藏域。然后将包含"ffrID"进行自动提交到后台处理，后台会跟据请求的ID查询出二级select（下拉菜单）。然后返回到b.jsp。通过b.jsp的onload(初使化事件)动态修改a.jsp页面的节点，从而达到无刷新效果。
a.jsp页面代码讲解：
1、form的action＝"aaa.action"，这个action是用来查询二级下柆框数据的。
2、form的target="ffrIframe",target是用来将查询后的数据返回到指定的框架页面，值"ffrIframe"是标签<iframe>的name属性。
a.jsp页面代码讲解：
1、<s:property value="selectStr" escape="false" />,这句代码是指：接收的是从后台组装好的字符串HTML代码。通过struts2的标签s:property的escape="false"属性来解析HTML代码，从而使原来的字符串HTML代码还原成控件。假设该代码返回的结果是："<select name="xxx"><option value="xxx">xxxx</option></select>"，那么通过escape="false"属性能将它还原成下拉菜单。
总结：
通过用Iframe实现Ajax无刷新效果这个例子，可以延伸两个对项目开发很有帮助的知识点。
第一：在上面的例子中用到一个关键的属性:target。target属性用的地方很多，例如在一个多iframe搭建的网页中，在某iframe子页面提交后，需要将结果返回到另一iframe页面。代码中就可用到target属性。再举一常见问题，在论坛上问的也最多的。例：在模态窗口中提交一些数据到后台，经过处理,从后台再次返回到当前提交的模态窗口中。那么通常遇到的问题是:数据从后台返回到最初的模态页面,但这个页面却是从新打开的。解决方案：可在<head>标签的最中间加一句代码<base target="_self"/>即可实现。
第二:通过s:property标签解析从后台返回的HTML标签。这样做的好处有：方便控制。比如：我要在某个页面，跟据数据库里的数据在页面动态勾选项相应的复选框。而按照传统的写法，在页面需要对每一个复选框进行if判断。如果复选框够多，那页面则会变很麻烦。通过从后台组装好的HTML代码在前台显示，页面会清爽很多。而且在后台组装勾选好的复选框比前台动态勾选复选框要容易的多.
分享到：
相关推荐
AjaxJavaScriptToWebService JavaScript通过Web Service实现AJAX无刷新数据交互
纯用javascript实现的ajax三级联动无刷新，数据传送采用json格式，开发平台采用vs2010 asp.net，压缩包含有sql脚本
1.如何实现简单页面布局 2.使用jsp如何实现隐藏与显示效果 3.通过iframe实现局部动态更新页面内容 1.界面布局 2.JavaScript实现隐藏缩放
JavaScript与Web Service组和实现Ajax五刷新通信(扩展)
AJAX无法实现文件上传功能，原因是JavaScript安全限制不能对文件执行操作，但是通过IFRAME框架可以模拟实现无刷新效果。虽说是无刷新的，但状态栏会刷新一下。代码是一个JSP的示例。
JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解 JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解
PHP AJAX实现一款无刷新下载文件的实例，同时与MySQL数据库连接，前端配合CSS与JavaScript技术，完成了一个漂亮的下载页面，这个页面是网页前端编程的综合展现。鼠标在下载列表移动的时候，会适时出现下载提示，抛去...
利用AJAX技术轻松实现页面无刷新自动更新！
如果使用Ajax计算新物品的总数量，服务器只会返回新物品总数量，而无须重新载入整个页面。 传统的聊天室基于客户端网页的自动刷新技术而实现，它的主要缺点是不断刷新页面造成屏幕的闪动，而经过了Ajax改造后的聊天...
validate 通用Ajax无刷新表单验证类（JavaScript）
DWR是一个框架，简单的说就是能够在javascript直接调用java方法，而不必去写一大堆的javascript代码。它的实现是基于ajax的，可以实现无刷新效果。
使用纯JavaScript代码，实现Ajax，在Javascript中调用java代码。 其中返回值可以使单个值，对象，集合
AJAX + JavaScript 实现无页面刷新标题栏提示新信息
ajax iframe jsp 无刷新上传文件+JavaScript字符串函数大全+如何自定义Struts2表单验证后的错误信息显示格式样式
使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
自个写的PHP+MySQL+Ajax无刷新文字聊天室 《PHP+MYSQL+Ajax无刷文字聊天室》 ***************************************** 功能 ：1） 不需要刷新，可实时获取最新信息显示在聊天窗口中 2） 支持回车直接发送...
帝国cms7.0无刷新登录，无刷新退出，ajax注册信息验证！ 使用说明： 只需3个步骤即可实现无刷新登录、退出、无刷新注册验证！ 1.将e文件夹直接放到网站根目录，把css文本复制到网站的样式文件中！ 2.在合适的位置...
所有发送、接收、显示在线用户列表等皆采用ajax技术完成，实现无刷新聊天的功能 Ajax的核心是JavaScript XmlHttpRequest对象。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术 使用： 首先...
ajax版无刷新显示最新新闻+Java+Servlet+XStream 您肯定会在项目中用到类似的功能。 宣传一下QQ群：WEB开发性感地带■■ 群号：14622422
Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新，通过本文和大家一起学习iframe实现局部刷新的几种方法汇总，对iframe局部刷新相关知识感兴趣的朋友一起学习吧