ajax效果模拟——隐藏的iframe无刷新效果

简介:

在ajax流行之前如何实现无刷新提交表单呢?其实用隐藏的iframe完全可以实现该功能,看一个测试的小例子。


ryAdd.jsp

 


<style type="javascript/text">

  // 全局方法
  function reset(){ 
       $("txtID").val(""); 
       $("txtName").val(""); 
  }
</script>

<form action="xy/ryAdd.action" target="frame">
 <table>
  <tr>
   <td>编号</td>
   <td><input type="text" name="txtID" id="txtID"></td>
  </tr>
  <tr>
   <td>姓名</td>
   <td><input type="text" name="txtName" id="txtName"></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="提交"></td>
  </tr>
  <tr>
   <td><span id="hint"></span></td>
  </tr>
 </table>
</form>
<iframe name="frame" style="display:none"></iframe>

 

 

Action

public class ryAction
{
 private String msg;

 public String ryAdd()
 {
  try
  {
   ...........
   msg = "添加成功";
  }
  cathc(Exception ex)
  {
   msg = ex.getMessage();
  }
  return "result";
 }

 ..........省略getter,setter方法..............
}

 

 

strust.xml
<action name="ryAdd" class="cn.xy.ryAction" method="ryAdd">
 <result name="result">result.jsp</result>
</action>

 

 

 

result.jsp
<head>
    <script type="text/javascript">
  window.onload = function(){
  // 本页面获得的提示信息
  if(document.getElementById('subhint'))
  {
      var hint = document.getElementById('subhint').innerHTML; 
       // 找到父页面
       if(window.parent){
            if(window.parent.reset){
                    window.parent.reset();
            }
            if(window.parent.document.getElementById('hint')){
                    window.parent.document.getElementById('hint').innerHTML = hint;
            }
       }
   }
 };
</script>
</head>
  
<body>
  <span id="subhint">${requestScope.msg}</span>
</body>

 

总结
过程就是将父页面表单的提交后的结果页面在子页面打开,这时子页面获得了页面的document的对象。子页面可以调用父页面的全局函数,并返回结果给父页面。现在有了ajax,完全可以替代这种方法。但是上传文件是不能使用ajax的,因为ajax传输的是说白了字符串,怎么可以传文件呢?本文的方法就派上用场了。

本文转自IT徐胖子的专栏博客51CTO博客,原文链接http://blog.51cto.com/woshixy/1018125如需转载请自行联系原作者


woshixuye111

相关文章
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
88 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
158 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
67 0
|
7月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
59 0
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
81 0
|
7月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
94 0