PHP + AJAX 实现二级联动

最新推荐文章于 2021-08-06 03:33:56 发布

墨无声

最新推荐文章于 2021-08-06 03:33:56 发布

阅读量766

点赞数

分类专栏： php及相关技术文章标签： php Ajax mysql xmlhttprequest

php及相关技术专栏收录该内容

2 篇文章

订阅专栏

原文地址：http://blog.youkuaiyun.com/s_willan/article/details/7221802

建立数据库表，如果是少量的数据就先全加载进去

SQL 语句

/*
SQLyog 企业版 - MySQL GUI v5.02
主机 - 5.0.45 : 数据库 - ld
*********************************************************************
服务器版本 : 5.0.45
*/

create database if not exists `ld`;

USE `ld`;

/*数据表 `class` 的表结构*/

DROP TABLE IF EXISTS `class`;

CREATE TABLE `class` (
`cid` int(10) NOT NULL auto_increment,
`class` varchar(100) NOT NULL COMMENT '类别',
`sid` int(10) NOT NULL default '0',
PRIMARY KEY (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=gbk;

/*数据表 `class` 的数据*/

insert into `class` values (1,'A',0), (2,'B',0), (3,'C',0), (4,'D',0), (5,'aa',1), (6,'ab',1), (7,'ac',1), (8,'ad',1), (9,'ba',2), (10,'bb',2), (11,'ca',3), (12,'da',4);
------------------------------------------------------------------------------------------------------------------------------------

执行以上的 SQL 语句，就建立好了我们的数据库( `ld` )和表( `class` )

建立 index.php , 将其当成我们的主页，代码如下(在搜索一级分类的时候，把搜索的 PHP 代码和页面HTML 代码掺写在了一块儿，看的有点乱，如果你做的二级联动，一级分类是固定的话，就可以直接把一级分类写在页面上，而不用再去搜索，还有，若使用了代码分离的框架，例如Smarty，也可以使用它来分离 PHP 和 HTML 代码，这里不作介绍):

------------------------------------------------------------------------------------------------------------------------------------

<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', 'hicc');
if(!$con){

die('Could not connect:'.mysql_error());

}
mysql_select_db("ld", $con);

//搜索一级分类
$sql = "SELECT cid,class FROM class WHERE `sid` = '0'";
$result = mysql_query($sql);
?>

<form name="myform">
<b>Please Select A Big Class:</b>

<select name="users" οnchange="showsecond(this.value)">

<?php
while($row = mysql_fetch_array($result)){
?>

<option value="<?=$row['cid'];?>"><?=$row['class'];?></option>

<?
}
?>

</select>

<select id="second" style="width:200px; display:none;"></select>

</form>

</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------

建立 out.php ,作为与 Ajax 互动的文件，代码如下：

------------------------------------------------------------------------------------------------------------------------------------

<?php

//必要的
header("Content-Type:text/xml;charset=gb2312");

$value = $_GET['value'];

$link = mysql_connect("localhost","root","hicc") or die("链接数据库失败");
mysql_select_db("ld", $link);
$sql = "SELECT cid, class FROM class WHERE `sid` = '".$value."'";
$result = mysql_query($sql, $link);
$data = '';

while(list($cid, $class) = mysql_fetch_row($result)){

$data .= "<row value='{$cid}'>{$class}</row>";

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

------------------------------------------------------------------------------------------------------------------------------------

建立 ld.js ,这是我们的重头戏，代码如下:

------------------------------------------------------------------------------------------------------------------------------------

//This Is 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]);

}

------------------------------------------------------------------------------------------------------------------------------------

OK ！
点击第一个下拉框，第二个也会跟着联动！