ajax-模板引擎综合运用-省市县三级联动

最新推荐文章于 2024-07-13 18:55:19 发布

圆滚滚肉肉

最新推荐文章于 2024-07-13 18:55:19 发布

阅读量184

点赞数 1

分类专栏： jQuery知识点 ajax 文章标签： php jquery

本文链接：https://blog.csdn.net/weixin_40507158/article/details/108204385

版权

jQuery知识点同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

1.功能介绍：

不用怎么说，比较常见的一个业务，通过调用第三方接口进行数据的获取，再也不用像之前一样啥都不知道，一点点的进行数据填充了

2.页面简单展示

页面比较丑，将就着看吧
在这里插入图片描述

3.具体实现详解分析

1.引入相关jQuery和template.js文件

2.相关的后端PHP文件（这是之前写好的，先不过多的赘述）

3.页面布局

<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>

4.script标签内的代码详解

 <script>
        $(function() {
            //公用方法
            function queryData(obj, callback) {
                $.ajax({
                    type: 'get',
                    url: //这个url是自己电脑上的文件存放路径
                    'http://localhost/ajax_mubanyinqing/summary/select.php',
                    data: obj,
                    dataType: 'json',
                    success: function(data) {
                        callback(data);
                    }
                });
            }
            //加载省级数据
            queryData({
            //：flag，用来区分请求的是省市县中间的那种数据（1：省，2：市；3：县）
    //2、参数二：选择省的时候传递pId,选择市的时候传递cId
                flag: 1,
            }, function(data) {
            //刚开始是option里面是没有任何内容额
                var option = ' ';
                //对数据进行遍历
                $.each(data, function(i, e) {
                    option += '<option value="' + e.id + '">' + e.province + '</option>';
                });
                //把省的数据追加到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>

圆滚滚肉肉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax-模板引擎综合运用-省市县三级联动

1.功能介绍：不用怎么说，比较常见的一个业务，通过调用第三方接口进行数据的获取，再也不用像之前一样啥都不知道，一点点的进行数据填充了2.页面简单展示页面比较丑，将就着看吧3.具体实现详解分析1.引入相关jQuery和template.js文件2.相关的后端PHP文件（这是之前写好的，先不过多的赘述）3.页面布局<body> <div id="container"> <label> 省：<select
复制链接

扫一扫