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 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
学习vue.js计算属性
Dec 03 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP 批量删除数据的方法分析
2009/10/30 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
便捷提取python导入包的属性方法
2018/10/15 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python实现多层感知器
2019/01/18 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
详解Python的三种可变参数
2019/05/08 Python
django迁移数据库错误问题解决
2019/07/29 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
学python最电脑配置有要求么
2020/07/05 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
六十大寿答谢词
2014/01/12 职场文书
商场中秋节广播稿
2014/01/17 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
最美护士演讲稿
2014/08/27 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
黑白记忆观后感
2015/06/18 职场文书
公司周年庆典致辞
2015/07/30 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书