ajax省市县三级联动

简介:


js事件

    $('#ProvinceId').change(function(){
            var parentId = $(this).val();
            $.ajax({
                url: '{sh::U("OpenStore/ajax","todo=getCity")}',
                type: 'POST',
                data: 'parentId='+parentId,
                dataType:'json',
                success: function(json) {
                    if (json.status == 1) {
                        var optionCity = "<option value=''>==请选择==</option>";
                        $.each(json.info,function(i,n){
                            optionCity += "<option value="+i+">" + n + "</option>";
                        });
                        var optionCounty = "<option value=''>==请选择==</option>";
                        // 重置市、县
                        $('#CityId').html(optionCity).val('');
                        $('#CountyId').html(optionCounty).val('');
                    } else {
                        layer.msg('获取数据异常');
                    }
                }
            });
        });

        $('#CityId').change(function(){
            var parentId = $(this).val();
            $.ajax({
                url: '{sh::U("OpenStore/ajax","todo=getCounty")}',
                type: 'POST',
                data: 'parentId='+parentId,
                dataType:'json',
                success: function(json) {
                    if (json.status == 1) {
                        var optionCounty = "<option value=''>==请选择==</option>";
                        $.each(json.info,function(i,n){
                            optionCounty += "<option value="+i+">" + n + "</option>";
                        });
                        // 重置县
                        $('#CountyId').html(optionCounty).val('');
                    } else {
                        layer.msg('获取数据异常');
                    }
                }
            });
            
        });

ajax

    public function ajax() {
        $todo = $this->_request('todo','trim');
        $data = array('status'=>0,'msg'=>'','info'=>array());
        switch ($todo) {
            case 'getCity':
                $parentId = $this->_post('parentId','trim');
                $getAreaData = $this->integral->getArea('2',$parentId); // 获取市
                if ($getAreaData['status'] == 1) {
                    $citys = $getAreaData['CustomProperties'];
                    $data['status'] = 1;
                    $data['info'] = $citys;
                    $data['msg'] = '获取成功';
                } else {
                    $data['status'] = 9;
                    $data['msg'] = '获取异常';
                }

                $this->ajaxReturn($data,'JSON');
                break;
            
            case 'getCounty':
                $parentId = $this->_post('parentId','trim');
                $getAreaData = $this->integral->getArea('3',$parentId); // 获取市
                if ($getAreaData['status'] == 1) {
                    $countys = $getAreaData['CustomProperties'];
                    $data['status'] = 1;
                    $data['info'] = $countys;
                    $data['msg'] = '获取成功';
                } else {
                    $data['status'] = 9;
                    $data['msg'] = '获取异常';
                }
                
                $this->ajaxReturn($data,'JSON');
                break;
            default:
                # code...
                break;
        }
    }


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5646706.html,如需转载请自行联系原作者
相关文章
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
85 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
143 0
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
63 0
|
6月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
57 0
|
6月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
78 0
|
6月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
90 0
|
6月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
6月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
50 0