您的位置：首页 > 其它

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

2012-10-08 19:17 393 查看

在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传输的是说白了字符串，怎么可以传文件呢？本文的方法就派上用场了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航