javascript_ajax 地址三级联动

1.三级地址联动思路如下：

2.建立数据库。这里直接使用网上的地址数库，最后一个字段无用，先不去管它

3.建立一个server.php 文件

 1 <?php 
 2     // 数据库连接
 3     mysql_connect("localhost","root","root") or die(mysql_error());
 4     mysql_select_db("ajax_demo");
 5     mysql_query("set names utf8");
 6     // 声明一个数组
 7     $list = array();
 8     // 对省级区域的请求作出反馈
 9     if(isset($_REQUEST['province_id'])){
10         $sql = 'select * from ecs_region where parent_id='.$_REQUEST['province_id'];
11         $res = mysql_query($sql);
12         while($row = mysql_fetch_assoc($res)){
13             array_push($list,$row);
14         };
15         // 把数组转化成json 格式文件
16         echo json_encode($list);
17     // 对城市级区域的请求作出反馈
18     }else if(isset($_REQUEST['city_id'])){
19         $sql = 'select * from ecs_region where parent_id='.$_REQUEST['city_id'];
20         $res = mysql_query( $sql );
21         while($row=mysql_fetch_assoc($res)){
22             array_push($list,$row);
23         }
24         // 把数组转化成json 格式文件
25         echo json_encode($list);
26     };
27 ?>

4. 建立一个请求文件：dizhi_argument.php

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script>
 9      window.onload= function(){
10          // 编写获取城市地址的函数：getcity();
11         function getcity(Id){
12             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
13             var url = 'server.php?province_id='+Id+'&tt='+ Math.random();
14              xhr.open('GET',url,true);
15              xhr.onreadystatechange = function(){
16                  if(xhr.readyState==4 && xhr.status==200){
17                      var obj = JSON.parse(xhr.responseText);
18                      var city = '';
19                      var Octiy = document.querySelector('#city');
20                      city += "<option value='0'>请选中城市</option>";
21                      for(var i in obj){
22                          city +="<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";
23                      }
24                      Octiy.innerHTML = city;
25                  }
26              }
27              xhr.send(null);
28         }
29          // 编写获取区县地址的函数：getDistrict();
30         function getDistrict(Id){
31             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
32             var url = "server.php?city_id="+Id+"&tt="+ Math.random();
33           
34             xhr.open('GET',url,true);
35             xhr.onreadystatechange = function(){  
36                 if(xhr.readyState==4 && xhr.status==200){
37                     var obj = JSON.parse(xhr.responseText);
38                     var district = '';
39                     var Odistrict = document.querySelector("#district");
40                     district = "<option value='0'>请选择区县</option>";
41                     for(var i in obj){
42                         district += "<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";
43                     }
44                     Odistrict.innerHTML = district ;
45                 }
46             }
47             xhr.send(null);
48         }
49         // 获取城市地址的元素
50         var Ocity = document.querySelector('#city');
51         // 对城市地址进行监控，如果改变了，则调用获取区县的函数：getDistrict()
52         Ocity.onchange = function(){
53             getDistrict(this.value);
54         };
55         // 获取省区地址元素
56         var Oprovince = document.querySelector('#province');
57         // 对省区地址进行监控，如果有发生改变，则调用城市的函数：getcity();
58         Oprovince.onchange= function(){
59             getcity(this.value);
60         };
61     }
62     </script>
63 </head>
64 <body>
65     <?php
66     // 服务器连接，数据库选择，设置字符集编码
67     mysql_connect("localhost","root","root") or die(mysql_error());
68     mysql_select_db("ajax_demo");
69     mysql_query("set names utf8");
70     ?>
71     
72     <select name="province" id="province">
73     <option value="0">请选择省区</option>
74     <?php
75     // 调用升级地址，遍历出来
76     $sql = "select * from ecs_region where parent_id=1" ;
77     $res = mysql_query($sql);
78     while($row=mysql_fetch_assoc($res)){ ?>
79         <option value="<?php echo $row['region_id'] ?>"><?php  echo $row['region_name']; ?></option>
80     <?php
81     } 
82     ?>
83     </select>
84     <!-- 城市区块 -->
85     <select name="city" id="city">
86         <option value="0">请选择城市</option>
87     </select>
88     <!-- 区县区块 -->
89     <select name="district" id="district">
90         <option value="0">请选择区县</option>
91     </select>
92 </body>
93 </html>

5.通过地址栏访问：http://localhost/aaa/yuanli/test/dizhi_argument.php

运行结果：结果OK，达到了三级代用的效果

上面使用的是GET 方法传递参数，如果想使用POST方式，只需要把dizhi_argument.php中的

xhr.open('GET',url,true); 改为 xhr.open('POST',url,true);

xhr.send(null); 改为 xhr.send("province_id="+Id);

并在send()函数前加入： xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

这样就可以了

posted on 2018-01-11 15:18 huanying2015 阅读(273) 评论(0) 编辑收藏举报