jQuery+ajax+本地josn文件数据 测试

自己踩坑，发现前端坑越来越深

1.测试环境本地服务器 阿帕奇自带 127.0.0.1

2.测试数据

{
    "re": [
        {
            "id":"0",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "img/item-bg2.png",
            "time": "2015-03-17"
        },
        {
            "id":"1",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "img/item-bg1.png",
            "time": "2007-06-17"
        },
        {
            "id":"2",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
           "src": "img/item-bg2.png",
            "time": "2017-07-17"
        },
        {
            "id":"3",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "img/item-bg1.png",
            "time": "2020-03-17"
        },
        {
            "id":"4",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
           "src": "img/item-bg2.png",
            "time": "2022-03-17"
        }
    ]
}

/*3.数据交互*/
$(function(){
            //获取当前URL地址、隐藏资源真实地址，解决图片引入问题
            function pathUrl(){
                var strUrl = window.location.href,
                    arrUrl = strUrl.split("/");
                    arrUrl.pop();
                    return arrUrl.concat('').join('/');
            }
                //取得当前地址
                var path=pathUrl();
                //请求成功的回调函数
                function callBack(data){
                    var data=data.re
                    var str="";
                    $.each(data, function(index,item) {
                        str+=`<li>
                            <a href=${"details.html?did="+item.id}>
                            <img class="item-img" src=${path+item.src} />
                            <div class="item-content">
                                <h3 class="item-title">${item.title}</h3>
                                <p class="item-subtitle">
　　　　　　　　　　　　　　　　　　　　<span class="item-time">${item.time}</span>
　　　　　　　　　　　　　　　　　　　</p>
                            </div>
                            </a>
                        </li>`;
                    });
                    $('.item-box').html(str);
                };
                //发送请求
                $.ajax({
                    type:"get",
                    url:"data.json",
                    dataType: "json",
                    success:callBack
                });
                
            });