PHP+AJAX 地区三级联动代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--------------------------------------------------------------
--省的字段是:province
--市的字段是:city
--县的字段是:area
--------------------------------------------------------------------------->

<script type="text/javascript">

var xmlHttp;//声明变量
var requestType="";//声明初始类型为空
function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头
{
    if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真,否则是假
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp
    }
}

function handleStateChange(){//判断返回的一个函数,来确定执行那个的函数
    if(xmlHttp.readyState==4)
        {//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成)
        if(xmlHttp.status==200)
            {//http的一个报头说明成功找到
            if(requestType=="city"){//判断查询的类型
                                showcity();//返回响应的显示
                            }
            else if(requestType="area"){//判断响应的查询的类型
                                    showarea();//返回响应的显示
                                }
            }
        }
}

function queryCity(citycode){//执行程序查询,查询城市的
    createXMLHttpRequest();//调用创建XmlHttp的函数
    requestType="city";//表示类型,查询城市处理显示的时候需要用到
    var url='data.php?provincecode='+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
    xmlHttp.open("GET",url,true);//建立服务器连接,异步传输tree
    xmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数
    xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}

function queryArea(citycode){//查询程序
    createXMLHttpRequest();//调用创建XmlHttp的函数
    requestType="area";//查询县的
    var url="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名
    xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}

function showcity(){//显示函数
    document.getElementByIdx_x("city").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
function showarea(){
    document.getElementByIdx_x("area").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据
}
</script>
</head>
<body>
<?php
    $
conn=mysql_connect("localhost","root","root");//链接数据库
    
mysql_select_db("novel");//选择数据库
    
mysql_query("set names 'utf8'");//设定字符集
    $
sql="select * from province";//查询数据库province表也就是省
    $
result=mysql_query($sql);//执行语句赋值给变量
    
?>
    
<form id='form1'><!--输出表单头-->
    
<!--输出下拉列表框,并设定onchange响应事件,把省值传递过去-->
    
<select id='province'onchange='queryCity(this.options[this.selectedIndex].value)'>
    
<!--输出下拉列表项值-->
    
<option value='-1selected>请选择省份</option>
    
<?php
    
while($row=mysql_fetch_row($result)){
    //循环循环查询显示省输出数据显示
        
echo "<option value='$row[1]'>$row[2]</option> ";
    }
    
?>
    
</select><!--下拉列表项尾数-->
    
<span id='city'></span><!--显示数据的城市的位置-->
    
<span id='area'></span><!--显示数据的城市的位置-->
    
</form><!--表单项结尾-->
</body>
</html>

data.php 代码

<?php
$provincecode=$_GET['provincecode'];//接收省键值
$citycode=$_GET['citycode'];//接收城市键值
$conn=mysql_connect("localhost","root","root");//连接主机
mysql_select_db("novel");//选择数据库
mysql_query("set names 'utf8'");
if($provincecode!=""){//如果传递过来的不为空则执行
    
$sql="select * from city where provincecode=$provincecode";//查询城市符合属于上边传递过来的省的字段
    
$result=mysql_query($sql);//执行SQL查询语句
    
print_r($row);
?>
    <select onchange='queryArea(this.options[this.selectedIndex].value)'><!--下拉列表框开头-->
    <option value='-1' selected>请选择城市</option><!--下拉列表框值开头-->
    <?php while($row=mysql_fetch_row($result)){//循环记录集?>
        <option value="<?php echo $row[1]?>"><?php echo$row[2]?></option>
    <?php }?>
    </select>
<?php }?>
<?php
    
if($citycode!=""){
    
$sql="select * from area where citycode=$citycode";
    
$result=mysql_query($sql);
    
echo "<select> ";
    
echo "<option value='-1' selected>请选择县</option> ";
    
while($row=mysql_fetch_row($result)){
        
echo "<option value='$row[1]'>$row[2]</option> ";
    
}
    
echo "</select> ";
}
?>

不掉到水里,也永不知道自己有多大潜力!
原文地址:https://www.cnblogs.com/guolanzhu/p/3487059.html