js利用iframe实现无刷新查询数据

javascript

2009-07-03 14:38

js利用iframe实现无刷新查询数据
原理:表单提交到本页的浮动框架.后台返回值修改主页面的DIV显示.
--------------------------------------------------------------------------------------------------------------

xxx.htm
<div id="msg" style="width:400; height:400;display:none;></div>

<form id="form1" name="form1" method="post" action="1.asp" target="page">
     <input type="text" name="t" id="t" />
    <input type="submit" name="button" id="button" value="提交" />
</form>

<iframe src="" width="200" height="400" name="page"></iframe>

1.asp

<% s=request.Form("t") %>
<script language="javascript">
 //把父窗口显示消息的层打开
 parent.document.getElementById("x").style.display = "block";
 //把本窗口获取的消息写上去
 parent.document.getElementById("x").innerHTML = <%=s%>;
 //并且设置为3秒后自动关闭父窗口的消息显示
 setTimeout("parent.document.getElementById('x').style.display = 'none'", 5000);
</script>


模拟ajax的查询                转:http://www.022jm.com/article_detail.asp?id=118
-------------------------------------------------------------------------------------------------------
iframe.asp:
<input type="button" value="提交" onclick="process();">
<div id="b"></div>
<div id="a" style="display:none"></div>
<iframe id="frameid" src="" frameborder="0" height="400" width="600"> </iframe>
<script>
var frameid = document.getElementById("frameid");
function process(){
var b=document.getElementById("b");
var a=document.getElementById("a");
b.innerHTML="<font color=red>查询中。。。<font>";
b.style.display='';
a.style.display='none';
frameid.src="process.asp?id="+Math.random() ;
}
</script>

process.asp
<%
str=""
for i=1 to 20000
str=str&i&"<br>"
next
response.write str
%>
<script>
var b= parent.document.getElementById("b");
var a = parent.document.getElementById("a");
b.innerHTML = ""
a.style.display=''
</script>