AJAX实现省市县三级联动效果

2024-10-01 21:09:48

最近在学AJAX做到这个省市县三级联动的案例，这里只是讲一下ajax请求的一些知识，对服务端数据.php文件就不叙述了。
（tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现）

效果图

首先准备两个服务端文件，另一个文件太长，这里就不导入了

selsect.php

<?php
    /*
    省市县后台数据接口
 接口调用规则：
 1.参数一：flag，用来区分请求的是省市县中间的那种数据
 2.参数二:选择省的时候传递pid，选择市的时候传递cId
 http://localhost/select.php?flag=1#pId=23
    */
    // include('./selectdata.php');
    require('./selectdata.php');
    // 省市县数据来自selectdata.php文件
    $province = $provinceJson;
    $city = $cityJson;
    $county = $countyJson;

    $flag = $_GET['flag'];
    // 省级数据
    if($flag == 1){
        echo json_encode($province);
    // 市级数据
    }else if($flag == 2){
        $pId = $_GET['pId'];
        $cityData = array();
        foreach ($city as $value) {
            if($value->id == $pId){
                // 直辖市
                array_push($cityData,$value);
                break;
            }else if($value->parent == $pId){
                // 非直辖市
                array_push($cityData,$value);
            }
        }
        echo json_encode($cityData);
    // 县级数据
    }else if($flag == 3){
        $cId = $_GET['cId'];
        $countyData = array();
        foreach ($county as $value) {
            if($value->parent == $cId){
                array_push($countyData,$value);
            }
        }
        echo json_encode($countyData);
    }
?>

select.html

这里可以用 底层ajax 请求，也可以用快捷方法 $.get 方法进行数据请求。因为请求的服务端文件跟当前文件同源，所以不需要进行跨域请求。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function($){
    function queryData(obj,callback){
     // $.ajax({
     //  type:'get',
     //  url:'http://localhost/AJAX/select.php',
     //  data:obj,
     //  dataType:'json',
     //  success:function(data){

     //   callback(data);
     //  }
     // });
     $.get('http://localhost/AJAX/select.php',obj,function(data){
      callback(data);
     },'json');
    };
    queryData({
     flag:1
    },function(data){
     var option = '';
     $.each(data,function(i,e){
      option += '<option value="' + e.id + '">' + e.province +'</option>'
     });
     $('#province').append(option);
    });
    $('#province').change(function(){
     // 避免数据叠加
     $('#city').find('option:gt(0)').remove();
     queryData({
      flag:2,
      pId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.city +'</option>'
      });
      $('#city').append(option);
     });
    });
    $('#city').change(function(){
     $('#county').find('option:gt(0)').remove();
     queryData({
      flag:3,
      cId:$(this).val()
     },function(data){
      var option = '';
      $.each(data,function(i,e){
       option += '<option value="' + e.id + '">' + e.county +'</option>'
      });
      $('#county').append(option);
     });
    });
   });
  </script>
  <style type="text/css">
   #container{
    width: 500px;
    min-height: 300px;
    margin: auto;
    text-align: center;
    padding: 10px;

   }
  </style>
 </head>
 <body>
  <div id="container">
   <label>
    省:
    <select id="province">
     <option >请选择省...</option>
    </select>
   </label>
   <label>
    市:
    <select id="city">
     <option >请选择市...</option>
    </select>
   </label>
   <label>
    县:
    <select id="county">
     <option >请选择县...</option>
    </select>
   </label>
  </div>
 </body>
</html>

这里还需要说明的是：使用$.ajax方法请求时，如果第二次ajax请求依赖于第一次请求的结果，那么第二次请求必须放到回调函数内部，这是因为ajax 异步请求。

类似于这样

$.ajax({
 type:'get',
 url:'citycode.php',
 data:{cityName:city},
 dataType:'json',
 // 如果第二次ajax请求依赖于第一次请求的结果，那么第二次请求必须放到回调函数内部
 success:function(data){
  $.ajax({
   type:'get',
   url:'cityweather.php',
   data:{cityCode:data.cityCode},
   dataType:'json',
   success:function(res){
   data = res.retData;
   var tag = '<ul><li>风向:'+data.WD+'</li><li>风级:'+data.WS+'</li><li>海拔:'+data.altitude+'</li><li>日期:'+data.date+'</li><li>最高温度:'+data.h_tmp+'</li><li>最低温度:'+data.l_tmp+'</li><li>平均温度:'+data.temp+'</li><li>日出时间:'+data.sunrise+'</li><li>日落时间:'+data.sunset+'</li><li>纬度:'+data.latitude+'</li><li>经度:'+data.longitude+'</li></ul>'
   $('#info').html(tag);
   }
  })
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ajax实现无刷新省市县三级联动

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex
PHP+Mysql+Ajax+JS实现省市区三级联动

基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
AJAX省市区三级联动下拉菜单(java版)

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
Ajax+php实现商品分类三级联动

当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值页面效果: $(function(){ //
Ajax商品分类三级联动的简单实现(案例)

思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值页面效果: $(functi
ajax实现省市三级联动效果

本文实例为大家分享了ajax实现三级联动效果的具体代码,供大家参考,具体内容如下 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap { background-color: beige; width: 400px
简单实现ajax三级联动效果

本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></sc
ajax三级联动下拉菜单效果

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端显示页面非常简单,只需要一
ajax三级联动的实现方法

ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如说北京吧,北京的代号是11,它下面的北京市副代号就11, 北京市的主代号是1101,北京市下面的地区副代号就是1101,调地区的时候可以根据主代号查询和它相同的副代号,就能查询出来想要让三级联动的内容在页面显示,只需要在页面建一个div就可以了 <div id="sanji">
ajax实现三级联动的基本方法

本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 <body> <div id="sanji">//div的id为"sanji" </div> 2.sanji js处理页面 $(document).ready(function(){ //向div里面放三个下拉菜单 var str = "<select id='sheng'>&l

AJAX实现省市县三级联动效果

相关推荐

随机推荐