625
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" ></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="txtName" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
<tr>
<td><span ></span></td>
</tr>
</table>
</form>
<iframe name="frame" ></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" 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 >${requestScope.msg}</span>
</body>
總結
過程就是將父頁麵表單的提交後的結果頁麵在子頁麵打開，這時子頁麵獲得了頁麵的document的對象。子頁麵可以調用父頁麵的全局函數，並返回結果給父頁麵。現在有了ajax，完全可以替代這種方法。但是上傳文件是不能使用ajax的，因為ajax傳輸的是說白了字符串，怎麼可以傳文件呢？本文的方法就派上用場了。
最後更新：2017-04-02 15:14:56