Ajax提高篇（7）Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框：

[html]  view plain copy

1. <tr>  
2.   
3.                 <td style="width: 130px">  
4.   
5.                     所在学院：</td>  
6.   
7.                 <td style="width: 100px">  
8.   
9.                     <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)">  
10.   
11.                         <option value="0">  
12.   
13.                             --请选择所在学院学院--  
14.   
15.                        </option>  
16.   
17.                     </select></td>  
18.   
19.             </tr>  
20.   
21.             <tr>  
22.   
23.                 <td style="width: 130px">  
24.   
25.                     所在专业：</td>  
26.   
27.                 <td style="width: 100px">  
28.   
29.                     <select id="specialty" style="width: 200px" runat="server" onchange="SaveSpecical(this.value)">  
30.   
31.                         <option value="0">  
32.   
33.                             --请选择所在专业--  
34.   
35.                        </option>  
36.   
37.                     </select></td>  
38.   
39.             </tr>  

JS脚本代码

[javascript]  view plain copy

1. <script type="text/javascript">  
2. var http_request = false;  
3. function send_request(method,url,content,responseType,callback)//定义发送请求的函数  
4. {  
5.     http_request=false;  
6.     if(window.XMLHttpRequest)  
7.     {  
8.         http_request=new XMLHttpRequest();  
9.         if(http_request.overrideMimeType)  
10.         {  
11.             http_request.overrideMimeType("text/xml");  
12.         }  
13.     }  
14.     else  
15.     {  
16.         try  
17.         {  
18.             http_request=new ActiveXObject("Msxml2.XMLHTTP");  
19.         }  
20.         catch(e)  
21.         {  
22.             try  
23.             {  
24.                 http_request=new ActiveXObject("Microsoft.XMLHTTP");  
25.             }  
26.             catch(e)  
27.             {}  
28.         }  
29.     }  
30.     if(!http_request)  
31.     {  
32.         window.alert("创建XMLHttpRequest对象失败");  
33.         return false;  
34.     }  
35.     if(responseType.toLowerCase()=="text")  
36.     {  
37.         http_request.onreadystatechange=callback;  
38.     }  
39.     else  
40.     {  
41.           
42.         window.alert("ERR");  
43.         return false;  
44.     }  
45.     if(method.toLowerCase()=="get")  
46.     {  
47.         http_request.open(method,url,true);  
48.     }  
49.     else if(method.toLowerCase()=="post")  
50.     {  
51.         http_request.open(method,url,true);  
52.         http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
53.     }  
54.     else  
55.     {  
56.         window.alert("Err");  
57.         return false;  
58.     }  
59.     http_request.send(content);  
60. }  
61.   
62. function changcollege(va)//当学院下拉列表发生改变时触发的脚本事件  
63. {  
64.     if(va!='0')  
65.     {  
66.         var speciality = document.getElementById("specialty");  
67.         speciality.disabled=false;  
68.           
69.         var url="Handler.ashx?type=college&id="+va;  
70.         send_request("GET",url,null,"text",populateClass3);  
71.     }  
72. }  
73. function populateClass3()//Ajax执行成功的回调函数  
74. {  
75.     var f=document.getElementById("specialty");  
76.     if(http_request.readyState==4)  
77.     {  
78.             if(http_request.status==200)  
79.             {  
80.                 var list=http_request.responseText;  
81.                 var classList=list.split("|");  
82.                 f.options.length=1;  
83.                 for(var i=0;i<classList.length;i++)  
84.                         //将取得的结果添加到下级的列表框中  
85.                 {  
86.                     var tmp=classList[i].split(",");  
87.                     f.add(new Option(tmp[1],tmp[0]));  
88.                 }  
89.             }  
90.             else  
91.             {  
92.                 alert("您所请求的页面有异常。");  
93.             }  
94.     }  
95. }      
96. </script>  

 

 

我们将http请求发送给服务端的Handler.ashx进行处理

 

[javascript]  view plain copy

1. public class Handler : IHttpHandler   
2. {  
3.   
4.     public void ProcessRequest(HttpContext context)  
5.     {  
6.         string type = context.Request.QueryString["type"];  
7.         if (type.Equals("college"))  
8.         {  
9.             string id = context.Request.QueryString["id"];  
10.             context.Response.ContentType = "text/plain";  
11.             context.Response.Write(getSpecialty(id));//这个是从数据库中根据传来省的id 查询出来的。学院的名字和主键，主键以便去查专业的名字  
12.         }  
13.     }  
14.   
15.     public string getSpecialty(string college)  
16.     {  
17.         DataSet ds = GetInformation.GetSpecialtyInfo(college);  
18.         string str = "";  
19.         for (int i = 0; i < ds.Tables[0].Rows.Count; i++)  
20.         {  
21.             if (i == ds.Tables[0].Rows.Count - 1)  
22.             {  
23.                 str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString();  
24.             }  
25.             else  
26.             {  
27.                 str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString() + "|";  
28.             }  
29.         }  
30.         return str.Trim();  
31.     }  
32.    
33.     public bool IsReusable {  
34.         get {  
35.             return false;  
36.         }  
37.     }  
38.   
39. }  

 

根据学院的编号获得相应的专业，并将专业的名称用“|”分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。

 

这里只是二级的联动显示，三级联动数据的现实原理是一样的。