前台页面两个select框，一个与学院关联，另一个与专业关联，现需要选择学院select框后，显示学院相关信息，且专业select下面仅有属于该学院的专业名称。也就是实现一个二级联动效果。

两个select里面分别定义onchange事件，事件中利用ajax的GET方法向后台PHP递交信息，再将查询得到的信息echo出来或document.write。

注：代码参考了有位叫y0umer的博主写的。

代码如下:

1. <script type="text/javascript">  
2.  
3. var XmlHttp;  
4.  
5. function createXmlHttpRequestObject(){  
6.  
7. if(window.ActiveXobject){ // 判断是否是ie浏览器  
8.  
9. try { // try开始  
10.  
11. xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX对象创建ajax  
12.  
13. }catch(e){  
14.  
15. xmlHttp = false;  
16.  
17. } // try end  
18.  
19. }else{ //Chrome、FireFox等非ie内核  
20.  
21. try{  
22.  
23. xmlHttp = new XMLHttpRequest(); //视为非ie情况下  
24.  
25. }catch(e){  
26.  
27. xmlHttp = false; // 其他非主流浏览器  
28.  
29. }  
30.  
31. } // 判断结束,如果创建成功则返回一个DOM对象,如果创建不成功则返回一个false  
32.  
33. if(xmlHttp)  
34.  
35. {  
36.  
37. return xmlHttp;  
38.  
39. }else{  
40.  
41. alert("对象创建失败,请检查浏览器是否支持XmlHttpRequest!");  
42.  
43. }  
44.  
45. } // 函数体  
46.  
47. //学院下拉框事件  
48.  
49. function showCollegeInfo(){  
50.  
51. var selectIndex = document.getElementById("college").selectedIndex;//获得是第几个被选中了  
52.  
53. var value = document.getElementById("college").options[selectIndex].value;  
54.  
55. if(value)  
56.  
57. {  
58.  
59. // 先创建一个对象实例  
60.  
61. createXmlHttpRequestObject();  
62.  
63. // 使用事件对象获取文本框ID的值  
64.  
65. var vCollege = value;  
66.  
67. var url = "college.php?xy="+vCollege; //待发送URL  
68.  
69. url=encodeURI(url);  
70.  
71. xmlHttp.onreadystatechange=ajaxok; // 判断浏览器状态栏 (接收玩数据触发的事件)  
72.  
73. xmlHttp.open("GET",url,false); // GET向服务器端发送数据  
74.  
75. xmlHttp.send(null);  
76.  
77. document.getElementById("collegeinfo").style.display="block";//显示学院信息的p  
78.  
79. }else{  
80.  
81. document.getElementById("collegeinfo").style.display="none";//隐藏学院信息的p  
82.  
83. }  
84.  
85. }  
86.  
87. function ajaxok()  
88.  
89. {  
90.  
91. if(xmlHttp.readyState == 4 && xmlHttp.status==200)  
92.  
93. {  
94.  
95. document.getElementById("collegeinfo").innerHTML = xmlHttp.responseText;  
96.  
97. }  
98.  
99. }  
100.  
101. //专业下拉框事件  
102.  
103. function showMajorInfo(){  
104.  
105. var selectIndex = document.getElementById("major").selectedIndex;//获得是第几个被选中了  
106.  
107. var value = document.getElementById("major").options[selectIndex].value;  
108.  
109. if(value)  
110.  
111. {  
112.  
113. // 先创建一个对象实例  
114.  
115. createXmlHttpRequestObject();  
116.  
117. // 使用事件对象获取文本框ID的值  
118.  
119. var vMajor = value;  
120.  
121. var url = "major.php?zy="+vMajor; //待发送URL  
122.  
123. url=encodeURI(url);  
124.  
125. xmlHttp.onreadystatechange=ajaxok2; // 判断浏览器状态栏 (接收玩数据触发的事件)  
126.  
127. xmlHttp.open("GET",url,false); // GET向服务器端发送数据  
128.  
129. xmlHttp.send(null);  
130.  
131. document.getElementById("majorinfo").style.display="block";//显示专业信息的p  
132.  
133. }else{  
134.  
135. document.getElementById("majorinfo").style.display="none";//隐藏专业信息的p  
136.  
137. }  
138.  
139. }  
140.  
141. function ajaxok2()  
142.  
143. {  
144.  
145. if(xmlHttp.readyState == 4 && xmlHttp.status==200)  
146.  
147. {  
148.  
149. document.getElementById("majorinfo").innerHTML = xmlHttp.responseText;  
150.  
151. }  
152.  
153. }  
154.  
155. </script>

Tags: Ajax异步传输 PHP异步传输

分享到：