`
lcb530
  • 浏览: 55853 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JavaScript学习心得之用Iframe实现Ajax无刷新效果

AjaxJavaScriptJSPHTML框架 
阅读更多

用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代码在前台显示，页面会清爽很多。而且在后台组装勾选好的复选框比前台动态勾选复选框要容易的多.

 

分享到：
| 我奋斗了18年才和你坐在一起喝咖啡
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics