体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何获取本地json里面的数据？url地址怎么写？字体图标在火狐里不显示，按需加载的问题

来源：3-5 自由编程

慕妹2075046

2019-08-13 10:55:48

<!DOCTYPE html>

<html lang="en">


<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>购物车</title>

   <style>

       * {

           padding: 0;

           margin: 0;

       }


       a {

           text-decoration: none;

       }


       .cart {

           width:308px;

           

           position: relative;


margin:10px auto;


       }


       .dropdown-toggle {

           width: 132px;

           height: 40px;

           position: absolute;

           top: 0;

           right: 0;

           box-shadow: 1px -2px 4px  1px  rgba(0, 0, 0, .1);

           float:right;

           background-color:red;

           

           z-index: 1;

       }


       .dropdown-layer {

           width: 308px;

           position: absolute;

           top: 40px;

           left: 0;

           box-shadow: 0px 1px 4px  2px  rgba(0, 0, 0, .1);

           display:none;

       }

   

       @font-face {font-family: "iconfont";

   src: url('font/iconfont.eot?t=1564927555374'); /* IE9 */

   src: url('font/iconfont.eot?t=1564927555374#iefix') format('embedded-opentype'), /* IE6-IE8 */

   url('font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKEAAsAAAAABjgAAAI5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApAXwE2AiQDCAsGAAQgBYRtBzEbhgURBUTJPg7jZm50hcbO4Fo0oWr893j4HCvfT3IEoG4qCVn4rQJWJBwJU1ejWbKu7W5Nx3CPMRGqS/Z861n+R77d6aUp4zxOowwIuTX4xL3TPwookPmAchlj0FiTJnUBdXEgBbgXtslKKOOGsQte4HkCjUYti83Z7sPqFfa0QNyurl1QX/ArCkvVC7UNa4t4rkZ9epBueBZ9P/5aiXqSmsyu2H91y2Xrf3Q6GblSrTgdEAIEtLkGGcsoxOHG+F5ZMFbWGC8mOVZp8KOzWg1s4qhmwf46u7gZDMNE8KPTmypAgsfqqxP9k55AdF56uHj0xd33j3qOHHv56G2l+/Cb/9+B9t//9fDm4dc/bPXbWFgMtFsP/SxPpVGBYNvoh3vn2lb/q18V8OlO3abIVAxzUr8PR/AvpANbiiG3ralo0sbOpPMcVY0aUYXdnb5PNfScOB3q9Uxw1hnJkNWbJgtzGTWarEKteuk6NFqSb27ShS1FacCiC0Bod0XS6iOydneyMB+o0euPWu2xRKOj0bVnk9mo1CZGLejAnKGy1HvXLiouXWMxtZrz8oi9Rx6rEMRBVE7l2CMvsWA8FImIB8/UQQYuw7YlGJhqtBKUIkMahr7pTYGlbqZswpAmkAOMM1CxSM8H3YWqfH4NFSYtjTua6oJ7iI2qwUEsEA0gc00/qOlRrhkdFBJCeMBjpAMyMAq1WgQMzaNqyBKBckJ0kAqddn6oJthe1/3dHmhkG1M4Q7O6m5XuhabZDAA=') format('woff2'),

   url('font/iconfont.woff?t=1564927555374') format('woff'),

   url('font/iconfont.ttf?t=1564927555374') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

   url('font/iconfont.svg?t=1564927555374#iconfont') format('svg'); /* iOS 4.1- */

 }

 

 .iconfont {

   font-family: "iconfont" !important;

   font-size: 14px;

   font-style: normal;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

 }

 

 .icon-jiantou:before {

   content: "\e612";

 }

 .dropdown-toggle i,

 .dropdown-toggle a{

     line-height:40px;

     color:#fff;

     font-size:14px;

 }

 .dropdown-toggle a{

     margin:0 0 0 4px;

     font-size:14px;

     

 }


 .dropdown-layer .item{

     height:60px;

     width:280px;

     

     margin-left:10px;

     border-bottom:1px solid #cfcfcf;

     font-size:16px;

     color:black;

 }

 .dropdown-layer>div:last-child{

     border-bottom:none;

 }

 @font-face {font-family: "iconfont2";

 src: url('font2/iconfont.eot?t=1565595673549'); /* IE9 */

 src: url('font2/iconfont.eot?t=1565595673549#iefix') format('embedded-opentype'), /* IE6-IE8 */

 url('font2/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMsAAsAAAAAB0AAAALdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCSIIgATYCJAMICwYABCAFhG0HMhtIBsgehXEbHZrTqKxAKP9TPPy3X7vv/9ll1hBLqpGOV9EQRU8nUcVio2QayUvY+ezs5yDPSVF3RmXMJp68yeTQbY7e5ORKJVhCX5VLqvwvMesT907/KPH5gHJce9OkLs3igALci/5FXSQFMsC0YewmAodwnUDdiDgmm7nFZcBaAuYF4koqbgbWuZAkWdksVGu2JvEGLOTi3vQe8MrfH/9EYU2hUgJ1uyc5bSD9K8E8szsjq44SQDyfA9YuSiwBEnFY69pmJlNLzNSDlLkJYF/VwZe50UhFu/3jEUQVqGyCIVV0T2IsudVvFiAh4wJwO6qA3GzWwOEJ+w77Yb3OYOfwyLGzZfb69Jfbdi50lyPn7FnF8CzLjRh0+vLSiY0LJ7aOx/od97LZufltr8p6jvNwMFQys7U/djh8EVS5Wlw2uxtmX+PEbXtwXxxEdm8H3trRmG2HaC2Tsr/6HEyF/MAG2/v+Pv8bywzG2J/e9o5bvjHTA6HTU6U20yp/Fnm/ZB/mec6xh7SviR5EfqhqinzvP/ZsMr/K5Ol914N0AO3HcttM+Pc/4/wmijQ6Jf/Ldgl8dCT48ED7MYF+HiDfozv41+KeXSmUAnORfHFtrnDB+h0a6upoA93X691Y3cCL5UI28HqeDsMpStkUmdhLqGhYRlW2grpFebsb+hBmItWwoE9B6HaAQqd3lLo9kIn9FhWDvqGqO8xQdxxuRzbMhNQ2i6BmitpgSxeUtmIVg6zUVlSXILFW0UyyUs6pQEQjjUIhT1DM5iEVInOs0LSLRZQykCFYCXOV25BCgaGaYBlqpTwJpepEPp+pexCvFSuBrQ0E0oxC2kAtukBSrTAVhg6mbEuvL4GIaSk0Iy0dA+EKCKEhHR0S4hH0IPNUql4d93KPRjsxEYpiQAwCU4JyFQeigCkMUtdPkkFaUTySEQm1RHytF9NXxVtfo/y6Q1AH9EXA8aV8irUd2lYJAgAAAAA=') format('woff2'),

 url('font2/iconfont.woff?t=1565595673549') format('woff'),

 url('font2/iconfont.ttf?t=1565595673549') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

 url('font2/iconfont.svg?t=1565595673549#iconfont') format('svg'); /* iOS 4.1- */

}


.iconfont2 {

 font-family: "iconfont" !important;

 font-size: 14px;

 font-style: normal;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 padding-left:8px;

}


.icon-gouwuche:before {

 content: "\e604";

}

.dropdown-layer span{

padding:0 6px;

}

.button{

   position:absolute;

   right:20px;

   bottom:15px;

   width:60px;

   height:30px;

   background:red;

   line-height:30px;

   font-size:12px;

   border-radius: 2px;

   color:#fff;

   text-align: center;

}

.item-title,.item-total{

   line-height:60px;

}

.img{

   background:url(img/cart/1.png) no-repeat;

   width:45px;

   height:45px;

   

   margin:10px 0 2px 6px;

}

.cart-item{

   margin-left:96px;

   margin-top:-50px;

   display:block;

   font-size:12px;

   color:#757575;

}

.price{

   display:block;

   margin-left:90px;

   margin-top:6px;

   font-size:12px;

   color:black;

}

.x{

   display:block;

   float:right;

   right:10px;  

   /* //为什么这里设置top没有效果 */

   margin-top:-25px;

}

.cart-empty{

   background:url(空购物车.png) no-repeat;

   

}

.cart-active .dropdown-toggle{

   background-color:#fff;

   

}

.cart-active a,

.cart-active i{

  color:red;

}

.cart-active .dropdown-layer{

   display:block;

}

.dropdown-arrow{

   display:inline-block;

   /* 因为icon的引入字体引入，为了防止箭头继承父元素的宽高，可以修改line-height */

   

}

/*公共的旋转样式（只要类名有-active的都可以用，如menu-active、card-active等）*/


[class*='-active'] .dropdown-arrow{

   -o-transform:rotate(180deg);

   -ms-transform:rotate(180deg);

   -moz-transform:rotate(180deg);

   -webkit-transform:rotate(180deg);

   transform:rotate(180deg);

   

}  

.transition{

   transition:all 0.5s;

}


   </style>


</head>


<body>

   <!-- data-active位置定义属性 -->

   <div class="cart dropdown" data-active='cart'>

       <div class='dropdown-toggle'>

           <i class='cart-icon iconfont2 icon-gouwuche'></i>

           <a target='_blank' href=''>购物车&nbsp;&nbsp;&nbsp;|&nbsp;</a>

           <a class='count'>18</a>

           <i class='dropdown-arrow iconfont icon-jiantou transition'></i>

       </div>



       <!-- 下拉列表 -->

       <div class='dropdown-layer' data-active='cart'>

           <div class='item item-title'>最新加入的商品</div>

           <div id="html1"></div>

           <div class='item-total'>

               <span>共<span id="count1">0</span>件商品</span><span>共计<span id="count2">0.00</span></span>

               <div class='button'>去购物车</div>

           </div>

       </div>


   </div>

   <script type="text/javascript" src='jquery.min.js'></script>

   <script type="text/javascript" src='cart.js'></script>

 

<script>


(function ($) {

   'use strick';

   // var list = [];

   //引入json文件，计算动态下拉菜单

   Cart.prototype.getData = function () {

       var url = '';//本地地址怎么写，json文件和HTML在同一目录下


       $ajax({

           url: url,

           datatype: 'json',

           timeout: 1,

       }).done(function (data) {

           var str = "";

           var price = 0;

           for (var i in data) {

               price += data['price'][i];

               str += `<div class='item '><img class='img' src='' /><a href='' class='cart-item'>` + data[i].name + `</a><span class='price'>￥` + list[i].price + `</span><span class='x'>X</span></div>`;

           }

       }).fail(function () {

           if (str == "") str = "您的购物车没有商品"

           $('.dropdown-layer').addClass('.cart-empty');

       });

   }



   $("#html1").html(str);

   $("#count1").html(data['name'].length);

   $("#count2").html(price);




   //下拉菜单动画

   function dropdown(element) {

       var $element = $(element),

           //拼接class名称的方法

           activeClass = $element.data('active') + '-active';

       //获取自定义属性(data-active) data('active')


       //添加事件

       $element.hover(function () {


           $element.addClass(activeClass);

       }, function () {

           $element.removeClass(activeClass);

       });

   }


   $.fn.extend({

       dropdown: function () {

           return this.each(function () {

               dropdown(this);

           });

       }

   })

   $('.dropdown').dropdown();


   //按需加载，这段代码应该写在获取数据之前？如何联系起来呢？

   var cache = {

       data: {},

       count: 0,

       addData: function () {

           if (!this.data[key])

               this.data[key] = data;

           this.count++;

       },


       readData: function (key) {

           return this.data[key];

       },

       deleteDataBykey: function (key) {

           delete this.data[key];

           this.count--;

       },

       deleteDataOrder: function (num) {

           var count = 0;

           for (var p in this.data) {

               if (count >= num) {

                   break;

               }

               count++;

               this.daleteDataByKey(p);

           }

       }

   }

</script>

</body>


</html>

按需加载应该放在哪里？按需加载如何与前面的代码联系起来？

写回答

1回答

好帮手慕码

2019-08-13

同学你好！
因为没有同学的全部代码，只有一这块代码无法运行。

（1）获取本地数据可以使用ajax,路径和图片等使用方法相同,如果是同一个路径下：$.ajax({url:"test1.json"}); 请求本地数据可能会有浏览器同源策略的限制提示跨域，可以在服务器中查看

http://img1.sycdn.imooc.com/climg/5d5267570001550604450230.jpg

（2）字体在火狐中不显示，可能是火狐浏览器的限制，可在服务器中尝试查看

（3）按需加载：可以使用定时器模拟延迟，在红色框那一块写调用数据的函数

http://img1.sycdn.imooc.com/climg/5d5267d300014a3e04500108.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

找不到network里的url

回答 2

老师如何实现根据json文件的不同html+=的格式也不同？

回答 2

老师，看着视频会操作，但实际到自己的开发中就懵逼了

回答 4

怎么像老师一样能打印出请求地址

回答 2

老师json文件获取不到

回答 1

打开慕课网App查看更多内容