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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python字典的常用方法总结
2019/07/31 Python
python logging日志模块原理及操作解析
2019/10/12 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
python 调整图片亮度的示例
2020/12/03 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
微博营销计划书
2014/01/10 职场文书
中学生自我评价范文
2014/02/08 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
党支部公开承诺书
2014/03/28 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
四风问题对照检查材料
2014/09/22 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
恰同学少年观后感
2015/06/08 职场文书