PHP+Ajax 二级联动菜单测试

快乐的诸葛明 2011-04-26 06:05:39

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PHP+Ajax 二级联动菜单测试</title>
<script language="javascript" src="ld.js"></script>
</head>
<body>
<?php
//连接数据库
$con=mysql_connect('localhost','root','12345678');
if(!$con){
die('Could not connect:'.mysql_error());
}
mysql_select_db("school", $con);
mysql_query('set names gb2312');
//搜索一级分类
$sql = "SELECT cid,sdept FROM class WHERE sid='0'";
$result = mysql_query($sql);
?>
<form name="myform">
<b>请选择一个系别:</b>
<select name="users" onChange="showsecond(this.value)">
<?php
while($row = mysql_fetch_array($result)){
?>
<option value="<?=$row['cid'];?>"><?=$row['sdept'];?></option>
<?
}
?>
</select>
<select id="second" style="width:200px; display:none;"></select>
</form>
</body>
</html>

bi.js
// JavaScript Document
function CreateXHR(){
var request;
//返回浏览器的名称
var browser = navigator.appName;
//使用IE，则使用XMLHttp对象
if(browser == "Microsoft Internet Explorer"){
var arrVersions=["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
for (var i=0;i<arrVersions.length;i++){
try{
//从中找到一个支持的版本并建立XMLHttp对象
request=new ActiveXObject(arrVersions[i]);
return request;
}
catch(exception){
//忽略，继续
}
}
}

else{
//否则返回一个XMLHttpRequest对象
request = new XMLHttpRequest();
if(request.overrideMimeType){
request.overrideMimeType('text/xml;charset=gb2312');
}
return request;
}
}
//实例化
var Request=new CreateXHR();
function showsecond(x){
var URL = "out.php?value="+x;
Request.open("GET",URL,true);
Request.onreadystatechange = Show_Second;
Request.send(null);
}
function Show_Second(){
if(Request.readyState==4 &&Request.status==200){

//显示二级框
document.getElementById("second").style.display ='';
//读取返回的xml数据
var myData=Request.responseXML.getElementsByTagName("row");
//如果数据长度为0，则表示没有取到数据，则不显示二级菜单
if(myData.length == 0){
document.getElementById("second").style.display = 'none';
}
var myStr=new Array();
var myValue=new Array();
for(var i = 0;i<myData.length;i++){
myStr[i]=myData[i].firstChild.data;
myValue[i]=myData[i].getAttribute("value");
}
document.getElementById("second").options.length =0;
for(var j=0;j<myStr.length;j++){
document.getElementById("second").options[document.getElementById("second").options.length] =new Option(myStr[j],myValue[j]);
}
}
}

out.php
<?php
//必要的\
$value = $_GET['value'];
header("Content-Type:text/xml;charset=gb2312");
$link = mysql_connect("localhost","root","12345678") or die("链接数据库失败");
mysql_select_db("school", $link);
$sql = "SELECT cid,sdept FROM class WHERE `sid` = '".$value."'";
$result = mysql_query($sql, $link);
$data = '';
while(list($cid,$sdept) =mysql_fetch_row($result)){
$data .= "<row value='{$cid}'>{$sdept}</row>");

}
//要显示的信息
echo "<data>".$data."</data>";
mysql_close($link);
?>

为什么我运行index.php,选择一个系别时，二级联动菜单出现？？？？，而不显示中文内容？请问一下怎么改?

class表的内容：
cid int(10) primary ,
sdept varchar(100)
sid int(10)

+-----+--------------------+-----+
| cid | sdept | sid |
+-----+--------------------+-----+
| 1 | 土木工程 | 0 |
| 2 | 通讯工程 | 0 |
| 3 | 园艺技术 | 0 |
| 4 | 计算机应用 | 0 |
| 5 | 地基与基础 | 1 |
| 6 | 工程地质学 | 1 |
| 7 | 工程制图 | 1 |
| 8 | 混凝土结构 | 1 |
| 9 | 施工技术与管理 | 1 |
| 10 | 混凝土结构 | 1 |
| 11 | 电路理论与应用 | 2 |
| 12 | 计算机技术 | 2 |
| 13 | 信号与系统 | 2 |
| 14 | 电磁场理论 | 2 |
| 15 | 数字信号处理 | 2 |
| 16 | 通信原理 | 2 |
| 17 | 植物学 | 3 |
| 18 | 植物生理 | 3 |
| 19 | 植物营养与施肥 | 3 |
| 20 | 植物病虫害防治技术 | 3 |
| 21 | 种子生产与管理 | 3 |
| 22 | 草坪建植与养护 | 3 |
| 23 | C语言 | 4 |
| 24 | 数据库 | 4 |
| 25 | PHP程序设计 | 4 |
| 26 | linux技术 | 4 |

(标注：sid=0的那几列代表系别，土木工程包括的课程为sid=1的那几列)

...全文