由ajax,js,xml,php实现的三级联动省市县下拉功能

最新推荐文章于 2021-06-24 10:08:40 发布

wenwenWENWEN1111

最新推荐文章于 2021-06-24 10:08:40 发布

阅读量2k

点赞数

分类专栏： php学习之js篇文章标签： ajax xml php xmlhttprequest function file

本文链接：https://blog.csdn.net/wenwenWENWEN1111/article/details/6900842

版权

php学习之js篇专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本案例综合了ajax,js,xml,php等多项技术。采用面向对象的方式和mvc模式，且与数据库进行交互。

本案例包括showCities.php,proCityService.class.php和showCitiesPro.php以及工具类sqlHelper.class.php四个页面。

界面如下：

部分核心代码如下：

showCities.php：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
//创建ajax引擎
function getXmlHttpObject(){
  var xmlHttpRequest;
  //不同的浏览器获取对象xmlhttprequest 对象方法不一样
  if(window.ActiveXObject){

   xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

  }else{

xmlHttpRequest=new XMLHttpRequest();
}

return xmlHttpRequest;

}

var myXmlHttpRequest="";

function getCities(){

myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

  var url="/ajax/showCitiesPro.php?act=getCity";

  var data="province="+$('sheng').value;

myXmlHttpRequest.open("post",url,true);//异步方式

  myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  //指定回调函数
  myXmlHttpRequest.onreadystatechange=chuli;

  //发送
  myXmlHttpRequest.send(data);// province

}
}
function chuli(){
  if(myXmlHttpRequest.readyState==4){

   if(myXmlHttpRequest.status==200){

    //取出服务器回送的数据

    var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

    $('city').length=0;
    var myOption=document.createElement("option");

     myOption.innerHTML="--城市--";
     //挂载到$('city')
     $('city').appendChild(myOption);

    //遍历并取出城市
    for(var i=0;i<cities.length;i++){

     var city_name=cities[i].childNodes[0].nodeValue;
     //创建新的元素option
     var myOption=document.createElement("option");
     myOption.value=city_name;
     myOption.innerHTML=city_name;
     //添加到
     $('city').appendChild(myOption);
    }
   }
  }
}
function getCounty(){

myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){

  var url="/ajax/showCitiesPro.php?act=getCounty";//post

  var data="city="+$('city').value;

myXmlHttpRequest.open("post",url,true);//异步方式

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli2;

  //发送
  myXmlHttpRequest.send(data);// province
}
}
function chuli2(){
  if(myXmlHttpRequest.readyState==4){

   if(myXmlHttpRequest.status==200){

    //取出服务器回送的数据
                var countys=myXmlHttpRequest.responseXML.getElementsByTagName("county");

    $('county').length=0;
    var myOption=document.createElement("option");

     myOption.innerHTML="--县城--";
     //挂载到$('city')
     $('county').appendChild(myOption);

    //遍历并取出城市
    for(var i=0;i<countys.length;i++){

     var county_name=countys[i].childNodes[0].nodeValue;
     //创建新的元素option
     var myOption=document.createElement("option");
     myOption.value=county_name;
     myOption.innerHTML=county_name;
     //添加到
     $('county').appendChild(myOption);
    }
   }
  }
}

//这里我们写一个函数
function $(id){
return document.getElementById(id);
}

</script>
</head>
<body>
<select id="sheng" οnchange="getCities();">
<option value="">---省---</option>

</body>
</html>

2：proCityService.class.php

<?php
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

require_once "sqlHelper.class.php";

class ProCityService {
//从省份表取出信息
   public function getProvince() {
      $sql="select province from `province` ";
//   echo $sql;
//    file_put_contents("d:/mylog.log",$sql."\r\n",FILE_APPEND);
   $sqlHelper=new SqlHelper();
   $provinces=$sqlHelper->execute_dql2($sql);
            for($i=0;$i<count($provinces);$i++){
          $list=$provinces[$i];
          $proList.="<province>{$list['province']}</province>";
        }
     $sqlHelper->close_connect();
        return $proList;
  }

    //由省份得到相应的市
public function getCity($province) {
      $sql="select city from `city` where parent_id=(select id from province where province='{$province}') ";
//   echo $sql;
//    file_put_contents("d:/mylog.log",$sql."\r\n",FILE_APPEND);//用file_put_contents()函数生成日志文件,可将信息写入mylog.log，以便查错。
   //创建工具类的sqlHelper对象

$sqlHelper=new SqlHelper();

//调用工具类的execute_dql2($sql)方法来进行查询操作
$counties=$sqlHelper->execute_dql2($sql);

   $cityList="<province>";
   //$num=count($cities);
   // file_put_contents("d:/mylog.log",$num."\r\n",FILE_APPEND);
//   //遍历
   for($i=0;$i<count($cities);$i++){
          $list=$cities[$i];
          $cityList.="<city>{$list['city']}</city>";
        }
      $cityList.="</province>";
     $sqlHelper->close_connect();
        return $cityList;
  }
   //由市得到相应的县
public function getCounty($city) {
      $sql="select county from `county` where parent_id=(select id from city where city='{$city}') ";
//   echo $sql;
//    file_put_contents("d:/mylog.log",$sql."\r\n",FILE_APPEND);

//创建工具类的sqlHelper对象

$sqlHelper=new SqlHelper();

  //调用工具类的execute_dql2($sql)方法来进行查询操作
   $counties=$sqlHelper->execute_dql2($sql);
   $coutyList="<province><city>";
   //$num=count($cities);
   // file_put_contents("d:/mylog.log",$num."\r\n",FILE_APPEND);
//   //遍历
   for($i=0;$i<count($counties);$i++){
          $list=$counties[$i];
          $coutyList.="<county>{$list['county']}</county>";
        }
      $coutyList.="</city></province>";
     $sqlHelper->close_connect();
        return $coutyList;
  }
}

3.showCitiesPro.php

<?php
     require_once 'proCityService.class.php';
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
    $act=$_GET['act'];
if($act=='getCity'){
//接收用户的选择的省的名字
$province=$_POST['province'];
     $proCityService=new ProCityService();
     $cityList=$proCityService->getCity($province);
echo $cityList;
}else if($act=='getCounty'){
    $city=$_POST['city'];
    $proCityService=new ProCityService();
    $coutyList=$proCityService->getCounty($city);
    echo $coutyList;
   }
?>

wenwenWENWEN1111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
由ajax,js,xml,php实现的三级联动省市县下拉功能

本案例综合了ajax,js,xml,php等多项技术。采用面向对象的方式和mvc模式，且与数据库进行交互。本案例包括showCities.php,proCityService.class.php和showCitiesPro.php以及工具类sqlHelper.class.php四个页面。界面如下：部分核心代码如下：showCities.php：
复制链接

扫一扫