<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在帮学校做一个小功能,主要是选择学院,再选择班级,最后选择学生,即ajax三级联动功能。所以最近两天</span>
就抽空学习了一下。因为主要是学校内部使用,ie6已经淘汰了,所以就做的很水,主要是实现基本功能而已。
废话不多说了,直接上效果图:
代码附上:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>三级浮动</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body οnlοad="display_college()">
<label for="college">学院:</label>
<select name="college" id="college" οnchange="display_class()">
<option value="">请选择</option>
</select>
<label for="class">班级:</label>
<select name="class" id="class" οnchange="display_student()">
<option value="">请选择</option>
</select>
<label for="student_num">学号:</label>
<select name="student_num" id="student_num">
<option value="">请选择</option>
</select>
</body>
</html>
ajax.js:
</pre><pre>
function display_college(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('get','show_college.php?rand='+ Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var colleges = xmlHttp.responseXML.getElementsByTagName("college");
$('college').length = 0;
var myoption = document.createElement('OPTION');
myoption.text = "请选择";
myoption.value = "";
$('college').appendChild(myoption);
for(var i=0;i<colleges.length;i++){
var collegeID = colleges[i].childNodes[0].childNodes[0].nodeValue;
var collegeName = colleges[i].childNodes[1].childNodes[0].nodeValue;
var myoption = document.createElement('OPTION');
myoption.value = collegeID;
myoption.text = collegeName;
$('college').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function display_class(){
var xmlHttp = new XMLHttpRequest();
college_id = $('college').value;
xmlHttp.open("get","show_class.php?college_id="+college_id+"&rand="+Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var classes = xmlHttp.responseXML.getElementsByTagName('class');
$('class').length = 0;
$('student_num').length = 0;
var myoption = document.createElement('OPTION');
myoption.value = '';
myoption.text = '请选择';
$('class').appendChild(myoption);
for(var i=0;i<classes.length;i++){
var classID = classes[i].childNodes[0].childNodes[0].nodeValue;
var className = classes[i].childNodes[1].childNodes[0].nodeValue;
var myoption = document.createElement('OPTION');
myoption.value = classID;
myoption.text = className;
$('class').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function display_student(){
var xmlHttp = new XMLHttpRequest();
class_id = $('class').value;
xmlHttp.open("get","show_student.php?class_id="+class_id+"&rand="+Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var students = xmlHttp.responseXML.getElementsByTagName('student');
$('student_num').length = 0;
var myoption = document.createElement('OPTION');
myoption.value = '';
myoption.text = '请选择';
$('student_num').appendChild(myoption);
for(var i=0;i<students.length;i++){
var studentID = students[i].childNodes[0].childNodes[0].nodeValue;
className = students[i].childNodes[1].childNodes[0].nodeValue;
myoption = document.createElement('OPTION');
myoption.value = studentID;
myoption.text = studentID;
$('student_num').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function $(id){
return document.getElementById(id);
}
后台三个php文件(主要是为了实现三级联动的功能,所以就没过多关注后台,也没对代码就行整合优化):
show_college.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接失败:".mysql_error());
mysql_query("set names 'utf8'");
$sql = "select * from temp_college";
$query = mysql_query($sql);
$info = "<school>";
while($row = mysql_fetch_assoc($query)){
$info.= "<college>";
$info.= "<collegeID>".$row['collegeID']."</collegeID>";
$info.="<collegeName>".$row['collegeName']."</collegeName>";
$info.="</college>";
}
$info.="</school>";
mysql_close($conn);
echo $info;
?>
show_class.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache;");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接错误:".mysql_error());
mysql_query("set names 'utf8'");
$college_id = $_GET['college_id'];
$sql = "select classID,className from temp_class where collegeID=$college_id";
$query = mysql_query($sql);
$info = "<college>";
while($row = mysql_fetch_assoc($query)){
$info.="<class>";
$info.="<classID>".$row["classID"]."</classID>";
$info.="<className>".$row["className"]."</className>";
$info.="</class>";
}
$info.="</college>";
mysql_close($conn);
echo $info;
?>
show_student.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache;");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接错误:".mysql_error());
mysql_query("set names 'utf8'");
$class_id = $_GET['class_id'];
$sql = "select studentNum,studentName from temp_student where classID=$class_id";
$query = mysql_query($sql);
$info = "<class>";
while($row = mysql_fetch_assoc($query)){
$info.="<student>";
$info.="<studentNum>".$row["studentNum"]."</studentNum>";
$info.="<studentName>".$row["studentName"]."</studentName>";
$info.="</student>";
}
$info.="</class>";
mysql_close($conn);
echo $info;
?>
在此说下基本思路吧:
1.第一次运行ajax:页面加载过程中调用js事件onload完成对学院下拉数据的选取。
2.第二次:在select标签加入onchange事件,当改变学院默认”请选择“选项时,运行一次,加载所属学院下的班级列表。选取学生原理同上。
3.后台通过对数据库的访问,对数据进行简单的处理,返回xml类型的数据,以供ajax.js文件方便访问。
小插曲:onchange事件与onselect事件区别:onselect 事件是选取页面上的内容时调用,而onchange事件是改变form表单原有内容时调用。