当前位置:Gxlcms > PHP教程 > 基于数据库、php、ajax的3级地区联动

基于数据库、php、ajax的3级地区联动

时间:2021-07-01 10:21:17 帮助过:2人阅读

之前每次要用地区联动基本都是用的其他人写好的js做的多级联动,但是发现最大的缺点就是地区信息太老,而且不方便更新。
今天在网上搜索到2015年最新的国家地域信息数据,就打算用数据库配合ajax来做联动,后台也可以很方便的进行数据更新

代码1(jquery代码,负责ajax数据联动前段):

<divclass="form-group"><labelfor="province">省份label><selectclass="form-control"id="province"name="province"><optionvalue ="" >option>
        //volist 是thinkphp的标签,这里我用thinkphp框架写的代码,自动载入省级地区信息
        <volistname="province"id="vo"><optionvalue ="{$vo.class_id}" >{$vo.class_name}option>volist>select><labelfor="city">城市label><selectclass="form-control"id="city"name="city">select><labelfor="county">县区label><selectclass="form-control"id="county"name="county">select>div><script>
$(document).ready(function(){//省数据变动
    $("#province").change(function(){
        $.post('/Home/Creat/ajax', {province:$("#province").val()},
        function(data){//alert('成功post回数据');if(data.info == 'ok') {
                    //返回ok,将市下拉框赋值//alert(data.content);
                    col_clear('city');
                    col_add('city',data.content);
                    $("#city").change();
                } else {
                    alert(data.info);
                }
            }, 'json').error(function(){
        alert("网络连接错误,请稍后再试");
        });
    });
    //市数据变动
    $("#city").change(function(){
        $.post('/Home/Creat/ajax', {city:$("#city").val()},
        function(data){if(data.info == 'ok') {
                    col_clear('county');
                    col_add('county',data.content);
                } else {
                    alert(data.info);
                }
            }, 'json').error(function(){
        alert("网络连接错误,请稍后再试");
        });
    });
});

//select操作方法// 添加  functioncol_add(id,data) {var selObj = $("#"+id);
    for (var i=0;i"+data[i].class_name+"");
    }

}
// 删除  functioncol_delete() {var selOpt = $("#mySelect option:selected");  
 selOpt.remove();  
}
// 清空  functioncol_clear(id) {var selOpt = $("#"+id+" option");  
 selOpt.remove();  
}
script>

代码2(php后端数据判断交互代码,基于thinkphp写的,如果是其他框架,原理也是一样的,代码会有些小差入):

publicfunctionajax(){$city = M('city');
        if(!IS_AJAX){
           $this->ajaxReturn(array(
                'info' => '非法的请求方式'
            ));
        }
        //如果提交过来的是省份改变if(I('post.province',0,'intval')){
            $filter = array(
                'class_parent_id'     => I('post.province',0,'intval'),
                'class_type' => 2
            );
            $data['content'] = $city->where($filter)->select();
            $data['info'] = 'ok';
        }

        //如果提交过来的是城市改变if(I('post.city',0,'intval')){
            $filter = array(
                'class_parent_id'     => I('post.city',0,'intval'),
                'class_type' => 3
            );
            $data['content'] = $city->where($filter)->select();
            $data['info'] = 'ok';
        }

        $this->ajaxReturn($data);
    }

最后是数据库,贡献下自己的数据库,根据2015年1月国家公布的地区信息写的,是最新的。
基于数据库、php、ajax的 3级地区联动
sql数据库下载

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('
  • ').text(i)); }; $numbering.fadeIn(1700); }); });

    以上就介绍了基于数据库、php、ajax的 3级地区联动,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

  • 人气教程排行