.net2003+ajax 无刷新区域下拉列表

最新推荐文章于 2025-12-19 22:21:46 发布

原创最新推荐文章于 2025-12-19 22:21:46 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #.net #dataset #function #exception #string

AjaX 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用ASP.NET和AJAX实现的省份与城市下拉联动选择功能。通过main.aspx页面上的两个下拉列表，用户可以选择省份并自动加载对应的城市选项。此功能涉及main.aspx、callservershen.aspx和callservershi.aspx三个页面的交互，利用AJAX异步获取数据，并通过SQL Server数据库查询省份和城市信息。

1创建三张页面main.aspx、callservershen.aspx、callservershi.aspx

在main.aspx页面中放两个下拉列表

然后写javascript

var xmlhttp=false;

var DrpInfo="";

function GetXmlHttp()

{

if(window.ActiveXObject)

{

try

{

xmlhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");

}

catch(e)

{

try

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

}

return xmlhttp;

}

//************************** 窗体加载 ----- 省 ***************************

function LoadShen()

{

GetXmlHttp();

var url="callservershen.aspx";

xmlhttp.onreadystatechange=ReadStateShen;

xmlhttp.open("post",url,true);

xmlhttp.send();

}

function ReadStateShen()

{

var drp1=document.getElementById("drp1");

if(xmlhttp.readyState==1)

{

DrpInfo="数据加载中..";

drp1.options[0]=new Option(DrpInfo,DrpInfo);

}

if(xmlhttp.reaydState==4)

{

document.getElementById("drp1").length=0;

drp1.options[0]=new Option("请选择");

var msg=xmlhttp.responseText;

msg=msg.substring(0,msg.length-1);

var msgarray=new Array();

msgarray=msg.split(",");

for(var i=0;i<msgarray.length;i++)

{

DrpInfo=msgarray[i];

drp1.options[drp1.length]=new Option(DrpInfo,DrpInfo);

}

//************************** 根据选择的省加载市 ***************************

function LoadShi()

{

GetXmlHttp();

var drp1=document.getElementById("drp1");

var drpInfo=drp1.options[drp1.selectedIndex].text;

var url="callservershi.aspx?shi="+escape(drpInfo);

xmlhttp.onreadystatechange=ReadStateShi;

xmlhttp.open("post",url,true);

xmlhttp.send();

}

function ReadStateShi()

{

var drp2=document.getElementById("drp2");

if(xmlhttp.readyState==1)

{

DrpInfo="数据加载中..";

drp2.options[0]=new Option(DrpInfo);

}

if(xmlhttp.readyState==4)

{

var msg=xmlhttp.responseText;

msg=msg.substring(0,msg.length-1);

var msgarray=new Array();

msgarray=msg.split(",");

for(var i=0;i<msgarray.length;i++)

{

DrpInfo=msgarray[i];

drp2.options[drp2.length]=new Option(DrpInfo,DrpInfo);

}

</script>

2在callservershen.aspx页面的page_load写如下代码 (注:查出数据中所有省名)

SqlConnection conn=new SqlConnection("server=.;database=test;uid=aa;pwd=aa");

private void Page_Load(object sender, System.EventArgs e)

{

if(!this.IsPostBack)

{

this.Bind();

}

private void Bind()

{

try

{

string strSql="select distinct(shen) from city";

DataSet ds=new DataSet();

SqlDataAdapter da=new SqlDataAdapter(strSql,conn);

da.Fill(ds,"dd");

for(int i=0;i<ds.Tables[0].Rows.Count;i++)

{

Response.Write(ds.Tables[0].Rows[i][0].ToString()+",");

}

Response.End();

}

catch(Exception){}

}

3在callservershi.aspx页面的page_load写如下代码 (注:查出数据中所有市名)

SqlConnection conn=new SqlConnection("server=.;database=test;uid=aa;pwd=aa");

private void Page_Load(object sender, System.EventArgs e)

{

if(!this.IsPostBack)

{

this.Bind();

}

private void Bind()

{

try

{

string str=Request.QueryString["shi"].ToString();

string strSql="select shi from city where shen='"+str+"'";

DataSet ds=new DataSet();

SqlDataAdapter da=new SqlDataAdapter(strSql,conn);

da.Fill(ds,"dd");

for(int i=0;i<ds.Tables[0].Rows.Count;i++)

{

Response.Write(ds.Tables[0].Rows[i][0].ToString()+",");

}

Response.End();

}

catch(Exception ){}

}

4在main.aspx页面中的<body>标签写onload="LoadShen();"
<body onload="LoadShen();">