使用AJAX更新级联下拉框
AJAX也不是什么新技术,只是自己没有用过,最近看了点资料,刚好用在项目中试试,其他的废话就不说了,网上一搜索一大堆,直接贴代码:
js脚本如下:
js脚本如下:
1 var xmlHttp ;
2 function createXMLHttpRequest() {
3 if (window.ActiveXObject) {
4
5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
6 }
7 else if (window.XMLHttpRequest) {
8 xmlHttp = new XMLHttpRequest();
9 }
10 }
11
12 function changValue()
13 {
14 createXMLHttpRequest() ;
15 var Type = document.all.DpwType.value ;
16 xmlHttp.open("POST", "GetDownValue.aspx?Type="+Type, true);
17 xmlHttp.onreadystatechange = handleStateChange ;
18 xmlHttp.send(null);
19 }
20
21 function handleStateChange()
22 {
23 if(xmlHttp.readyState == 4) {
24 if(xmlHttp.status == 200) {
25 var responseXML=xmlHttp.responseXML.getElementsByTagName("typeValue");
26 var e = document.all.DpwLevel ;
27 for(var i=0;i<e.options.length;i++)
28 {
29 e.remove(i);
30 }
31 e.options.add(new Option("", ""));
32
33
34 for( var k = 0 ; k < responseXML.length ; k++ )
35 {
36 var typename = responseXML[k].firstChild.nodeValue;
37 e.options.add(new Option(typename, typename));
38 }
39 }
40 }
41 }
后台代码如下:2 function createXMLHttpRequest() {
3 if (window.ActiveXObject) {
4
5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
6 }
7 else if (window.XMLHttpRequest) {
8 xmlHttp = new XMLHttpRequest();
9 }
10 }
11
12 function changValue()
13 {
14 createXMLHttpRequest() ;
15 var Type = document.all.DpwType.value ;
16 xmlHttp.open("POST", "GetDownValue.aspx?Type="+Type, true);
17 xmlHttp.onreadystatechange = handleStateChange ;
18 xmlHttp.send(null);
19 }
20
21 function handleStateChange()
22 {
23 if(xmlHttp.readyState == 4) {
24 if(xmlHttp.status == 200) {
25 var responseXML=xmlHttp.responseXML.getElementsByTagName("typeValue");
26 var e = document.all.DpwLevel ;
27 for(var i=0;i<e.options.length;i++)
28 {
29 e.remove(i);
30 }
31 e.options.add(new Option("", ""));
32
33
34 for( var k = 0 ; k < responseXML.length ; k++ )
35 {
36 var typename = responseXML[k].firstChild.nodeValue;
37 e.options.add(new Option(typename, typename));
38 }
39 }
40 }
41 }
1 if( Request.QueryString["Type"] != "" )
2 {
3 string type = Request.QueryString["Type"].ToString().Trim() ;
4 if( type == "1" )
5 {
6 type = "HortationLevel" ;
7 }
8 if( type == "2" )
9 {
10 type = "PunishLevel" ;
11 }
12 StringBuilder str = new StringBuilder();
13 string sql = @"select * from ItemAttribute where TypeClass = '"+type+"' " ;
14 DataSet ds = DbTool.ExecuteDataSet( sql ) ;
15 str.Append("<type>");
16 for( int i= 0 ; i < ds.Tables[0].Rows.Count ; i++ )
17 {
18 str.Append("<typeValue>");
19 str.Append( ds.Tables[0].Rows[i]["typeName"].ToString() );
20 str.Append("</typeValue>");
21 }
22 str.Append("</type>");
23
24 Response.ContentType="text/xml";
25 Response.Write( str );
26 Response.End() ;
27 }
ok,一个简单的级联下拉框的刷新就可以搞定了。。。
2 {
3 string type = Request.QueryString["Type"].ToString().Trim() ;
4 if( type == "1" )
5 {
6 type = "HortationLevel" ;
7 }
8 if( type == "2" )
9 {
10 type = "PunishLevel" ;
11 }
12 StringBuilder str = new StringBuilder();
13 string sql = @"select * from ItemAttribute where TypeClass = '"+type+"' " ;
14 DataSet ds = DbTool.ExecuteDataSet( sql ) ;
15 str.Append("<type>");
16 for( int i= 0 ; i < ds.Tables[0].Rows.Count ; i++ )
17 {
18 str.Append("<typeValue>");
19 str.Append( ds.Tables[0].Rows[i]["typeName"].ToString() );
20 str.Append("</typeValue>");
21 }
22 str.Append("</type>");
23
24 Response.ContentType="text/xml";
25 Response.Write( str );
26 Response.End() ;
27 }