zoukankan      html  css  js  c++  java
  • 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 }); });
  • 相关阅读:
    ffplay代码播放pcm数据
    linux设备驱动
    i2c协议
    macos安裝Ruby
    mac安裝node.js
    Flutter-Wrap流式布局
    Flutter-CircleAvatar圆形和圆角图片
    Flutter-indexstack
    Flutter-Card卡片布局
    Flutter-去除ListView滑動波紋
  • 原文地址:https://www.cnblogs.com/xzma/p/7217830.html
Copyright © 2011-2022 走看看