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


Posted in Javascript onOctober 16, 2021

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

效果图

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

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

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);
   }
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue-ajax小封装实例
Sep 18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
JS中如何优雅的使用async await详解
Oct 05 #Javascript
js中Object.create实例用法详解
Oct 05 #Javascript
TypeScript中条件类型精读与实践记录
Oct 05 #Javascript
SSM VUE Axios详解
Ajax实现三级联动效果
Oct 05 #Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 #Javascript
You might like
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php-fpm中max_children的配置
2019/03/15 PHP
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
pyramid配置session的方法教程
2013/11/27 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
单位介绍信范文
2014/01/18 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
班组建设经验交流材料
2014/05/12 职场文书
大学新闻系自荐书
2014/05/31 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
升学宴来宾致辞
2015/07/27 职场文书
干部考核工作总结
2015/08/12 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang