數(shù)據(jù)庫
.
.
test.html
..
<html>
<head><title>php_ajax聯(lián)動下拉菜單</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" src="ajax.js"></script>
<script language="javascript">
function query(){
var pid = document.getElementByIdx("bigClassName").value;
if(pid!=""){
createRequest('query.php?pid='+pid);
}
}
</script>
</head>
<body>
<form action="<?=$PHP_SELF?>?" name="class" method="get" >
<select name="bigClassName" id="bigClassName" onchange="query()">
<option value="">--選擇大類--</option>
<?php
$link=mysql_connect("localhost","root","root");
mysql_select_db("sortclass") or die("沒有此數(shù)據(jù)庫！");
$sql="select cid,cname from class where pid=0";
mysql_query("set names gb2312");
$res=mysql_query($sql,$link);
while($result=mysql_fetch_assoc($res)){
echo "<option value='".$result["cid"]."'>".$result["cname"]."</option>";
}
?>
</select>
<select name="smallClassName" id="smallClassName">
<option value="">--選擇小類--</option>
</select>
<input type="submit" value="提交" />
</form>
</body>
</html>
.
ajax.js
.
var http_request =
false;
function createRequest(url) {
//初始化對象并發(fā)出XMLHttpRequest請求
http_request =
false;
if (window.XMLHttpRequest) {
//Mozilla等其他瀏覽器
http_request =
new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) {
//IE瀏覽器
try {
http_request =
new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
http_request =
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request) {
alert("不能創(chuàng)建XMLHTTP實例!");
return false;
}
http_request.onreadystatechange = alertContents;
//指定響應方法
http_request.open("GET", url,
true);
//發(fā)出HTTP請求
http_request.send(
null);
}
function alertContents() {
//處理服務器返回的信息
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var smallClassName=document.getElementByIdx("smallClassName");
var dataArray=[];
//alert(http_request.responseText);
myVariable=http_request.responseText;
//形如: 1,新聞中心;2,學習園地;
var stringArray = myVariable.split(";");
//以;分隔字符串
stringArray.pop();
//移除數(shù)組最后一個元素,stringArray[0]==1,新聞中心 stringArray[1]==2,學習園地
var len=stringArray.length;
for(var i=0;i<len;i++){
dataArray[i]= stringArray[i].split(",");
// 循環(huán)數(shù)據(jù)條數(shù)按,分割字符串
}
//alert(dataArray[1][0]);//返回 新聞中心
//初始化smallClassName的數(shù)據(jù)
smallClassName.length=0;
var alertOption=document.createElement_x("OPTION");
alertOption.value="";
alertOption.text="--選擇小類--";
smallClassName.add(alertOption);
for(var j=0;j<len;j++){
//添加數(shù)據(jù)
var objOption=document.createElement_x("OPTION");
objOption.value = dataArray[j][0];
objOption.text = dataArray[j][1];
smallClassName.add(objOption);
}
}
else {
alert('您請求的頁面發(fā)現(xiàn)錯誤');
}
}
}
..
query.php
..
<?php
error_reporting(E_ERROR|E_WARNING|E_PARSE);
$link=mysql_connect("localhost","root","root");
mysql_select_db("sortclass",$link) or die("no such database!");
//$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString); //Ajax中先用encodeURIComponent對要提交的中文進行編碼
mysql_query("set names gb2312");
$pid=$_GET[pid];
$res=mysql_query("select cid,cname from class where pid='$pid'",$link);
header('Content-type: text/html;charset=GB2312');
//指定發(fā)送數(shù)據(jù)的編碼格式為GB2312
while($info=mysql_fetch_array($res)){
$str.=$info["cid"].",".$info["cname"];
$str.=";";
}
echo $str;
?>