ajax三级联动

<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 onload="display_college()">
	<label for="college">学院：</label>
	<select name="college" id="college" onchange="display_class()">
		<option value="">请选择</option>
	</select>
	<label for="class">班级：</label>
	<select name="class" id="class" onchange="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;
?>

数据库文件见资源下载地址：http://download.csdn.net/detail/xqg666666/8037397

在此说下基本思路吧：

1.第一次运行ajax：页面加载过程中调用js事件onload完成对学院下拉数据的选取。

2.第二次：在select标签加入onchange事件，当改变学院默认”请选择“选项时，运行一次，加载所属学院下的班级列表。选取学生原理同上。

3.后台通过对数据库的访问，对数据进行简单的处理，返回xml类型的数据，以供ajax.js文件方便访问。

小插曲：onchange事件与onselect事件区别：onselect 事件是选取页面上的内容时调用，而onchange事件是改变form表单原有内容时调用。

posted @ 2014-10-14 16:12 qingguoing 阅读(359) 评论(0) 编辑收藏举报

刷新页面返回顶部

qingguoing

叩首问路，码梦为生

ajax三级联动

公告