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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
AngularJs 常用的过滤器
May 15 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
js实现计时器秒表功能
Dec 16 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基于Snoopy解析网页html的方法
2015/07/09 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python基本语法经典教程
2016/03/11 Python
python之Character string(实例讲解)
2017/09/25 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
基于Python函数和变量名解析
2019/07/19 Python
python绘制封闭多边形教程
2020/02/18 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
String和StringBuffer的区别
2015/08/13 面试题
七一讲话心得体会
2014/09/05 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
推广普通话主题班会
2015/08/17 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL