原生js使用ajax实现省市县三级联动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajaxtitle>
    <script>
        window.onload=function(){
            var xhr=new XMLHttpRequest();
            xhr.open('get','index.php?type=sheng',true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                   var data=eval(xhr.responseText);
                   var str='';
                   for(var i=0; i<data.length; i++){
                        str+='+data[i].provinceID+'">'+data[i].province+'';
                   }
                    document.getElementById('province').innerHTML=str;
                    //console.log(data[0].province);
                    //alert(data);
                }
            }
            xhr.send();
            //
            var province = document.getElementById('province');
            province.onchange=function(){
                var value=this.value;
                xhr.open('get','index.php?type=shi&provinceID='+value,true);
                xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                   var data=eval(xhr.responseText);
                   var str='';
                   for(var i=0; i<data.length; i++){
                        str+='+data[i].cityID+'">'+data[i].city+'';
                   }
                    document.getElementById('city').innerHTML=str;
                }
            }
            xhr.send();
            }
            //
            var area = document.getElementById('city');
            city.onchange=function(){
                var value=this.value;
                xhr.open('get','index.php?type=area&cityID='+value,true);
                xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                   var data=eval(xhr.responseText);
                   var str='';
                   for(var i=0; i<data.length; i++){
                        str+='+data[i].areaID+'">'+data[i].area+'';
                   }
                    document.getElementById('area').innerHTML=str;
                }
            }
            xhr.send();
            }

        }
    script>
head>
<body>
    <select id="province">
            <option value="0">--请选择省--option>
    select>
    <select id="city">
             <option value="0">--请选择市--option>
    select>
    <select id="area">
            <option value="0">--请选择县--option>
    select>
body>
html>
php
$servername = "127.0.0.1";
$username = "root";
$password = "root";
 
// 创建连接
$mysqli = new mysqli($servername, $username, $password);
 
// 检测连接
if ($mysqli->connect_error) {
    die("连接失败: " . $mysqli->connect_error);
} 
$mysqli->select_db('three');
$mysqli->query('set names utf8');

if($_GET['type']=='sheng'){
    $list=$mysqli->query('select * from jing_province');

    while($row=$list->fetch_array()){
       $data[]=$row;
    }
    echo json_encode($data);
}elseif($_GET['type']=='shi'){
    $father=$_GET['provinceID'];
    $list=$mysqli->query('select * from jing_city where father='.$father.' ');

    while($row=$list->fetch_array()){
       $data[]=$row;
    }
    echo json_encode($data);
}else if($_GET['type']=='area'){
    $father=$_GET['cityID'];
    $list=$mysqli->query('select * from jing_area where father='.$father.' ');

    while($row=$list->fetch_array()){
       $data[]=$row;
    }
    echo json_encode($data);
}

 

转载于:https://www.cnblogs.com/mengor/p/8275856.html

你可能感兴趣的:(原生js使用ajax实现省市县三级联动)