ajax 学习笔记之三 级联的操作
基于ajax的级联,实现起来很简单.
说明:Select1 存放省份信息 ,Select2存放地市信息.
1.在页面加载的时候首先在服务器端获取省份信息.
function
getA()
... {
var time=new Date().getTime();
myRequest("../temp.aspx","action=getNum&time="+time,getAhandle);//getAhandle事件处理函数
}
function getNumhandle()
... {
if(req.readyState==4)
...{
if(req.status==200)
...{
var getText=req.responseText;
var drp=document.getElementById("Select1");
if(getText !="error")
...{
var all=getText.split(",");
var op;
drp.innerHTML="";
for(var i=0;i<all.length;i++)
...{
op=document.createElement("option");
op.innerText=all[i];
op.value=all[i];
drp.appendChild(op);
}
}
}
}
}
... {
var time=new Date().getTime();
myRequest("../temp.aspx","action=getNum&time="+time,getAhandle);//getAhandle事件处理函数
}
function getNumhandle()
... {
if(req.readyState==4)
...{
if(req.status==200)
...{
var getText=req.responseText;
var drp=document.getElementById("Select1");
if(getText !="error")
...{
var all=getText.split(",");
var op;
drp.innerHTML="";
for(var i=0;i<all.length;i++)
...{
op=document.createElement("option");
op.innerText=all[i];
op.value=all[i];
drp.appendChild(op);
}
}
}
}
}
由getA将请求提交至服务器端,服务器端根据请求在数据库中获取数据,并将省份数据生成为逗号分割的字符串.返回至客户端.
以下为服务器端代码:C#
protected
void
Page_Load(
object
sender, EventArgs e)
... {
if (action == "getNum")
...{
string msg = "";
msg = GetNum(Session["zongji"].ToString(), Session["fenji"].ToString());
msg = msg.Remove(msg.LastIndexOf(','));
Response.Write(msg.Trim());//因为返回的都是字符串信息,所有不必加Response.ContentType = "application/xml";
}
}
... {
if (action == "getNum")
...{
string msg = "";
msg = GetNum(Session["zongji"].ToString(), Session["fenji"].ToString());
msg = msg.Remove(msg.LastIndexOf(','));
Response.Write(msg.Trim());//因为返回的都是字符串信息,所有不必加Response.ContentType = "application/xml";
}
}
2.页面加载后就可以看到省份的信息.在Select1中发生change()事件时候,可以基于Select1.value发送至服务器端检索省份下的地市信息.
可以建立getB()方法,具体操作同上.
实例中用到了MyRequest()方法,是我自定义的方法.代码如下
var
req;
function createXMLHttpRequest()
... {
if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
req = new XMLHttpRequest();
if (req.overrideMimeType) ...{//设置MiME类别
req.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) ...{ // IE浏览器
try ...{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
try ...{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) ...{}
}
}
return req;
}
// 参数分别为url ,参数值 , 处理方法名
function myRequest(url,urlvalue,handle)
... {
req=createXMLHttpRequest();
req.onreadystatechange=handle;
req.open("POST",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(urlvalue);
}
function createXMLHttpRequest()
... {
if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
req = new XMLHttpRequest();
if (req.overrideMimeType) ...{//设置MiME类别
req.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) ...{ // IE浏览器
try ...{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
try ...{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) ...{}
}
}
return req;
}
// 参数分别为url ,参数值 , 处理方法名
function myRequest(url,urlvalue,handle)
... {
req=createXMLHttpRequest();
req.onreadystatechange=handle;
req.open("POST",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(urlvalue);
}