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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
javascript实现获取服务器时间
May 19 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
PassWord输入框代码分享
Jun 07 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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面向对象程序设计之类常量用法实例
2014/08/20 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
javascript 写类方式之五
2009/07/05 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python 字符串中的字符倒转
2008/09/06 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
详解python中list的使用
2019/03/15 Python
python字典排序的方法
2019/10/12 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
社区居务公开实施方案
2014/03/27 职场文书
创优争先心得体会
2014/09/11 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
python​格式化字符串
2022/04/20 Python