Ajax 无刷新大小类联动
思路:显示页后台代码不做sql的操作,单独建一个页面(dosql.aspx)用来执行sql操作,然后将结果response出来。而显示页会用一个对象等待这个页面的返回结果,当结果返回后,再用js把结果在显示页面显示出来即可。
最终效果:
页面js代码如下:
<script language="javascript" type="text/jscript">
var request = false;//异步调用用到的对象就是这个东东
/*下面一长串的try只是为了避免浏览器不同申明不了request对象*/
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft) {
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request = false;
}
}
}
if (!request)
{
alert("Error initializing XMLHttpRequest!");
}
function ShowInfo()
{
if (request.readyState == 4)
{
var text=request.responseText.split("|");
document.all.SmClass.options.length=0;
for(var n=0;n<text.length;n+=2)
{
op=window.Option(text[n+1],text[n]);
document.all.SmClass.options.add(op);
}
}
}
//显示数据
function ShowSerch()
{
if (request.readyState == 4)
{
text=request.responseText.split("|");
var t=document.getElementById("ProductList");
text[text.length-1]=null;
//添加表格行显示数据
for(var i=0;i<text.length;i+=5)
{
if(text[i]==null)
break;
var tr=t.insertRow();
var td1=tr.insertCell();
var td2=tr.insertCell();
var td3=tr.insertCell();
var td4=tr.insertCell();
var td5=tr.insertCell();
td1.innerText=text[i];
td2.innerText=text[i+1];
td3.innerText=text[i+2];
td4.innerText=text[i+3];
td5.innerText=text[i+4];
}
}
}
function Serch()
{
var table=document.getElementById("ProductList");
/*删除表格多余的行*/
for(var i=table.rows.length;i>1;i--)
{
table.deleteRow(i-1);
}
/*发送请求*/
var text=document.getElementById("txtSerch").value;
var cid=document.getElementById("SmClass").value;
var parentid=document.getElementById("BigClass").value;
url="SelectClassSQL.aspx?text="+escape(text)+"&cid="+escape(cid)+"&parentid="+escape(parentid);
request.open("GET",url, true);
request.onreadystatechange = ShowSerch;//ShowSerch()为服务器响应后的显示数据函数
request.send(null);
}
function ChangeClass(BigClassId)
{
url="SelectClassSQL.aspx?BigClassId="+escape(BigClassId);
request.open("GET",url, true);
request.onreadystatechange = ShowInfo;
request.send(null);
}
</script>
posted on 2009-03-05 14:00 red_guitar 阅读(308) 评论(2) 编辑 收藏 举报