首页手记关于获取京东的地址！！！

关于获取京东的地址！！！

标签：

JQuery JavaScript AngularJS

这两天boss交给我和ios同事一个任务，就是抓取京东页面的地址和把地址的首字母编写出来做成json文件，都说懒人成就世界，我算是亲身体验了。第一天下午，ios说手动敲吧，手动敲了一个下午，敲到我快吐血了，鉴于后端人员没有什么空，而我作为前端又不会爬虫，ios就更不会了。第二天是在受不了，找到了一个方法，分享一下，话不多说，进入正文。

需要掌握的东西： angular（可选，方便制作），jq，ajax

一、获取城市列表

截取企业注册地址json


    //https://reg.jd.com/reg/company 
    var data=[];
    function getAreas(id, lvl,d,isSpecial=false) {  
        if (lvl > 3) {  
            return;
        }  
        $.get("https://reg.jd.com/reg/area", {  
            level: lvl,  
            parentId: id  
        },  
        function(msg) {  
            msg = eval(msg);  
            var areas = msg.Areas; 
            if(!isSpecial){
                if (lvl == 1) {
                    for (var j = 0; j < areas.length; j++) { 
                        d.push({"name":areas[j].Name,"area":[]});
                        var subId = areas[j].Id;
                        getAreas(subId, 2, d[j].area);
                    }
                }else if (lvl == 2) {
                    //console.log(d);
                    for (var j = 0; j < areas.length; j++) { 

                        d.push(areas[j].Name);
                    }
                }
            }else{
                for (var j = 0; j < areas.length; j++) { 
                    d.push(areas[j].Name);
                }
            }
        });  
    };  

    $("#companyprovince option").each(function(i) {  
        var id = $(this).val();
        var index=i-1;
        if (id < 1) {
            return;
        }  
        var name = $(this).text();
        data.push({"name":name,"city":[]});
        console.log(data);
        if(id == 1 || id == 2){
            data[index].city[0]={
                "name": name,
                "area":[]
            };
            getAreas(id, 1, data[index].city[0].area, true);
        }else{
            getAreas(id, 1, data[index].city);
        }
    });

解释一下步骤，首先打开https://reg.jd.com/reg/company ，在控制台输入上面的代码，就可以获取到京东的三级联动地址了。
接下来吧data数组转化为字符串，在控制台输入JSON.stringify(data)；
然后把数据赋值下来去掉前后双引号就可以得到最新的三级联动城市数据。
再通过在线格式化工具进行格式化就可以了。http://www.sojson.com/
- 收货地址截取源代码，步骤基本跟企业截取差不多，有兴趣的自己研究一下。这里接口不同了，有点复杂了。

var data=[];
    function getAreas(id, lvl,d,isSpecial=false) {  
        var url,postData,msg;
        if (lvl > 3) {  
            return;
        }  
        if(lvl==1){
            url="https://easybuy.jd.com//address/getCitys.action";
            postData={"provinceId": id}
        }else if(lvl==2){
            url="https://easybuy.jd.com//address/getCountys.action";
            postData={"cityId": id}
        }
        $.post(url,postData,function(msg){
            msg = eval(msg); 
            if(!isSpecial){
                if (lvl == 1) {
                    var k=0;
                    for (var val in msg) { 
                        d[k]={"name":msg[val],"area":[]};
                        getAreas(val, 2, d[k].area);
                        k++;
                    }
                }else if (lvl == 2) {
                    //console.log(d);
                    var k=0;
                    for (var val in msg) { 
                        d[k]=msg[val];
                        k++;
                    }
                }
            }else{
                for (var val in msg) { 
                    d.push(msg[val]);
                }
            }
        })
    };  

    $("#provinceDiv option").each(function(i) {  
        var id = $(this).val();
        var index=i-1;
        if (index < 0) {
            return;
        }  
        var name = $(this).text();
        data.push({"name":name,"city":[]});
        if(id == 1 || id == 2 || id == 3 || id == 4 || id == 84){
            data[index].city[0]={
                "name": name,
                "area":[]
            };
            getAreas(id, 1, data[index].city[0].area, true);
        }else{
            getAreas(id, 1, data[index].city);
        }
    });

二，把中文城市json加上拼音。

这个实现也没有那么简单，主要是要知道有这样的一个插件，但也需要对字符串的拼接很熟悉，如果不想写很多代码还需要IED的配合才能快速完成。
拼音插件的地址：http://github.com/liuxianan/pinyinjs/
代码具体是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/angular.js/1.3.20/angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctr">
    [
    <div ng-repeat="(key, value) in china">
        {
        <p>"name":"{{value.name}}",</p>
        <p>"nameSpell":"{{value.name | change}}",</p>"city":[
        <div ng-repeat="(key, val) in value.city">
            {
            <span>"name":"{{val.name}}","nameSpell":"{{val.name | change}}","area":[</span>
            <span ng-repeat="(key, a) in val.area">"{{a}}",</span>],
            <br>"areaSpell":[
            <span ng-repeat="(key, a) in val.area">"{{a | change}}",</span>],
            },
        </div>
        ]},
    </div>
    ]
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pinyin_dict_firstletter.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pinyinUtil.js"></script>
    <script>
        var app = angular.module('app',[]);
        app.controller('ctr', function($scope,$http,$filter){
            $scope.china=[];
            $http.get('city.json').success(function(data){
                $scope.china=data;
            })
        })
        app.filter('change',function(){
            return function(value){
                var result=pinyinUtil.getFirstLetter(value);
                return result;
            }
        })
    </script>
</body>
</html>

这里主要对repeat要熟悉，把页面运行后生成的代码之后复制到sublime，注意这里 [ ] 和 { } 最后还会多一个“,”，所以可以这个ide把这些全选去掉。

这里贴不了json数据，太大了，如果不会弄得，而且需要的可以留下你的邮箱。

点击查看更多内容