php 做登录页面带有二级,php ajax实现的二级（多级）联动菜单

周末练习了一下ajax的联动菜单，一直没有测试完全通过。后来从网上看到一个不错的思路。一起研究。这里以城市为例子来说明。

首先看文件结构：

/inc 包含function.php文件和数据操作类

/index.php html代码和州的收据获取代码

/ajax_city.php 城市数据的获取代码

/ajax.js httpRequest的建立和异步请求

index.php文件：

include('inc/function.php');

?>

ajax联动下拉框菜单

$state=get_select_values('state');

foreach ($state as $rows){

echo "".$rows['state_name']."";

}

?>

please select state first

ajax.js文件：

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){

var xmlHttp;

try{

xmlHttp = new XMLHttpRequest();

}

catch(e)

{

var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",

"MSXML2.XMLHTTP.5.0",

"MSXML2.XMLHTTP.4.0",

"MSXML2.XMLHTTP.3.0",

"MSXML2.XMLHTTP",

"Microsoft.XMLHTTP");

for (var i=0; i

try {

xmlHttp = new ActiveXObject(XmlHttpVersions[i]);

}

catch (e) {}

}

}

if (!xmlHttp)

alert("Error creating the XMLHttpRequest object.");

else

return xmlHttp;

}

function getcity(){

var selectObj = document.getElementById("state");

var url = "ajax_city.php?stateid=" +escape(selectObj.options[selectObj.selectedIndex].value);

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = getcityOk;

xmlHttp.send(null);

}

function getcityOk(){

if (xmlHttp.readyState == 4) {

var response = xmlHttp.responseText;

try{

var classObj = document.getElementById("city");

classObj.innerHTML=response; // 开始的写法，但无论如何也传不到页面中去！→

classObj.outerHTML=response;

}

catch(exception){}

}

}

ajax_city.php文件：

include('inc/function.php');

$stateid=$_GET['stateid'];

$city=get_select_city($stateid);

echo ""; //修正追加部分 by zhoz 11130123

foreach ($city as $rows){

echo "".$rows['city_name']."";

}

echo "";

?>

function.php文件：

function get_select_values($table){

global $db;

$query = "select * from $table";

$result = $db->query($query);

if (!$result)

return false;

$num_newslist = $db->num_rows($result);

if ($num_newslist ==0)

return false;

$result = $db->result_to_array($result);

return $result;

}

function get_select_city($state_ID){

global $db;

$query = "select * from city where state_ID=$state_ID";

$result = $db->query($query);

if (!$result)

return false;

$num_newslist = $db->num_rows($result);

if ($num_newslist ==0)

return false;

$result = $db->result_to_array($result);

return $result;

}

总结：

这只是一个简单的联动菜单，但当我把select对象传入函数中去，并在请求的url上加上参数，那就改成了一个多级联动的下拉选择菜单了。这里我测试没有通过，即选择了大类以后，小类可以跳动，但是改变了的值无法正常显示。由于时间较晚了，今天就到这了，等测试通过后，我再来说明原因吧。

[2007-11-13 1:17 补记]　经过仔细的研究测试，终于把问题解决了。上面的红字处及为修正部分。