<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表單原有內容時調用。