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

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

JS脚本代码

<scripttype="text/javascript">
1. varhttp_request=false;
2. functionsend_request(method,url,content,responseType,callback)//定义发送请求的函数
3. {
4. http_request=false;
5. if(window.XMLHttpRequest)
6. {
7. http_request=newXMLHttpRequest();
8. if(http_request.overrideMimeType)
9. http_request.overrideMimeType("text/xml");
10. }
11. }
12. else
13. try
14. newActiveXObject("Msxml2.XMLHTTP");
15. catch(e)
16. newActiveXObject("Microsoft.XMLHTTP");
17. {}
18. if(!http_request)
19. window.alert("创建XMLHttpRequest对象失败");
20. returnif(responseType.toLowerCase()=="text")
21. http_request.onreadystatechange=callback;
22. else
24. window.alert("ERR");
25. if(method.toLowerCase()=="get")
26. http_request.open(method,true);
27. elseif(method.toLowerCase()=="post")
28. http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
29. window.alert("Err");
30. http_request.send(content);
31. functionchangcollege(va)//当学院下拉列表发生改变时触发的脚本事件
32. if(va!='0')
33. varspeciality=document.getElementById("specialty");
34. speciality.disabled=varurl="Handler.ashx?type=college&id="+va;
35. send_request("GET",null,"text",populateClass3);
36. functionpopulateClass3()//Ajax执行成功的回调函数
37. varf=document.getElementById("specialty");
38. if(http_request.readyState==4)
39. if(http_request.status==200)
40. varlist=http_request.responseText;
41. varclassList=list.split("|");
42. f.options.length=1;
43. for(vari=0;i<classList.length;i++)
44. //将取得的结果添加到下级的列表框中
45. vartmp=classList[i].split(",");
46. f.add(newOption(tmp[1],tmp[0]));
47. alert("您所请求的页面有异常。");
48. </script>

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

publicclassHandler:IHttpHandler
1. voidProcessRequest(HttpContextcontext)
2. stringtype=context.Request.QueryString["type"];
3. if(type.Equals("college"))
4. stringid=context.Request.QueryString["id"];
5. context.Response.ContentType="text/plain";
6. context.Response.Write(getSpecialty(id));//这个是从数据库中根据传来省的id查询出来的。学院的名字和主键，主键以便去查专业的名字
7. publicstringgetSpecialty(stringcollege)
8. DataSetds=GetInformation.GetSpecialtyInfo(college);
9. stringstr="";
10. inti=0;i<ds.Tables[0].Rows.Count;i++)
11. if(i==ds.Tables[0].Rows.Count-1)
12. str+=ds.Tables[0].Rows[i]["SpecialtyID"].ToString()+","+ds.Tables[0].Rows[i]["SpecialtyName"].ToString();
13. +ds.Tables[0].Rows[i]["SpecialtyName"].ToString()+"|";
14. returnstr.Trim();
15. publicboolIsReusable{
16. get{
17. }

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!