您所在位置：主题：[原创]AJAX+ASP实现搜索结果显示
风的旋律
[专家分：20] 发布于 2010-01-02 17:38:00
AJAX最方便的就是不刷新页面动态与用户交互了.最近在给单位写个程序,用AJAX实现了不刷新网页显示用户搜索结果的功能.我写的程序只是抛砖引玉,还有很多功能可以发现.
环境:windows XP+IIS5.0
数据库:ACCESS2003
语言:ASP
数据库需要自己建立一个哦,只建一个表就行了,表名取:expired;表的字段名为client_name,随便
写几个名字到里面去就行了.
index.asp
----------------------------------
<script language="JavaScript">
function whatis(a)
{
var req = null;
if(window.XMLHttpRequest)
req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject(Microsoft.XMLHTTP);
req.onreadystatechange = function()
{
if(req.readyState<4)
{
document.getElementById("hey").innerHTML="<img width=50 src=../image/loading.gif></img>";
//加载时显示图片
}
if(req.readyState == 4)
{
if(req.status == 200)
{
document.getElementById("hey").innerHTML=req.responseText;
//在页面插入返回的结果
}
else
{
document.myform.device_des.value="Error: returned status code " + req.status + " " + req.statusText;
}
}
};
req.open("POST", "readcn.asp?a="+escape(a),true);
//将用户输入的值通过POST方法使用异步方式(最后一个参数设置为true)传递到readcn.asp.
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
}
function loadtotext(a) //函数功能:用户点击相应的搜索结果,将结果返回到搜索栏.
{
document.myform.clientname.value=document.getElementsByName("hello")[a-1].innerHTML;
//得到id为hello的窗体元素,这样就可以遍历窗体元素所有的值,本程序是设备在readcn.asp里面.
}
</script>
<form method="POST" action="license_query.asp" name="myform">
<table border="0" width="617" cellspacing="1" cellpadding="1" align=center class=a2>
<tr bgcolor='#FFFFFF'>
<td align="center" class=a3><input type=text name=clientname size=15 onKeyUp="whatis(this.value)" id="yes" autocomplete="off"></td>
</tr>
<tr>
<td colspan=7 id="hey" name="hey" >这里就是动态显示结果的位置,HOHO.</td>
</tr>
</table>
------------------------------------------------------------
readcn.asp
------------------------------------------------------------
<!--#include file="conn.asp"-->
<%
Response.charset = "gb2312"
'目的是正确显示返回的结果
if request("a")<>"" then
set rs=server.createobject("adodb.recordset")
sql="select top 10 * from expired where client_name like '%" & request("a") & "%'"
'根据自己的数据库设置
rs.open sql,conn,1,1
Response.charset = "gb2312"
if rs.eof then
response.write "<div id=hello style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>没有可供参考的信息</div>"
%>
<%else
rs.movefirst
for i=1 to rs.recordcount
response.write "<div id=hello onClick=loadtotext(" & i & ") style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>" & rs("client_name") & "</div>"
rs.movenext
next
rs.close
set rs=nothing
end if
else
response.write "<div id=hello style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>没有可供参考的信息</div>"
end if%>
---------------------------------------------------------
conn.asp
---------------------------------------------------------
<%
dim conn
dim connstr
dim db
db="../expired.mdb" '根据自己的数据库位置设置
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
conn.Open connstr
%>
环境:windows XP+IIS5.0
数据库:ACCESS2003
语言:ASP
数据库需要自己建立一个哦,只建一个表就行了,表名取:expired;表的字段名为client_name,随便
写几个名字到里面去就行了.
index.asp
----------------------------------
<script language="JavaScript">
function whatis(a)
{
var req = null;
if(window.XMLHttpRequest)
req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject(Microsoft.XMLHTTP);
req.onreadystatechange = function()
{
if(req.readyState<4)
{
document.getElementById("hey").innerHTML="<img width=50 src=../image/loading.gif></img>";
//加载时显示图片
}
if(req.readyState == 4)
{
if(req.status == 200)
{
document.getElementById("hey").innerHTML=req.responseText;
//在页面插入返回的结果
}
else
{
document.myform.device_des.value="Error: returned status code " + req.status + " " + req.statusText;
}
}
};
req.open("POST", "readcn.asp?a="+escape(a),true);
//将用户输入的值通过POST方法使用异步方式(最后一个参数设置为true)传递到readcn.asp.
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
}
function loadtotext(a) //函数功能:用户点击相应的搜索结果,将结果返回到搜索栏.
{
document.myform.clientname.value=document.getElementsByName("hello")[a-1].innerHTML;
//得到id为hello的窗体元素,这样就可以遍历窗体元素所有的值,本程序是设备在readcn.asp里面.
}
</script>
<form method="POST" action="license_query.asp" name="myform">
<table border="0" width="617" cellspacing="1" cellpadding="1" align=center class=a2>
<tr bgcolor='#FFFFFF'>
<td align="center" class=a3><input type=text name=clientname size=15 onKeyUp="whatis(this.value)" id="yes" autocomplete="off"></td>
</tr>
<tr>
<td colspan=7 id="hey" name="hey" >这里就是动态显示结果的位置,HOHO.</td>
</tr>
</table>
------------------------------------------------------------
readcn.asp
------------------------------------------------------------
<!--#include file="conn.asp"-->
<%
Response.charset = "gb2312"
'目的是正确显示返回的结果
if request("a")<>"" then
set rs=server.createobject("adodb.recordset")
sql="select top 10 * from expired where client_name like '%" & request("a") & "%'"
'根据自己的数据库设置
rs.open sql,conn,1,1
Response.charset = "gb2312"
if rs.eof then
response.write "<div id=hello style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>没有可供参考的信息</div>"
%>
<%else
rs.movefirst
for i=1 to rs.recordcount
response.write "<div id=hello onClick=loadtotext(" & i & ") style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>" & rs("client_name") & "</div>"
rs.movenext
next
rs.close
set rs=nothing
end if
else
response.write "<div id=hello style=filter:alpha(opacity=90);background:#ffffff;width:617;border:1 solid #000000>没有可供参考的信息</div>"
end if%>
---------------------------------------------------------
conn.asp
---------------------------------------------------------
<%
dim conn
dim connstr
dim db
db="../expired.mdb" '根据自己的数据库位置设置
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
conn.Open connstr
%>