一看就懂——利用getJSON（）与each（）方法动态创建内容

一个案例——忘记的时候可以翻阅参考↓<务必放在服务器内才能看效果哟~>
 
html文件内容如下↓
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             * {
                 margin: 0;
                 padding: 0;
             }
             ul li {
                 list-style: none;
             }
             a {
                 text-decoration: none;
                 color: #666;
             }
             a:hover {
                 color: red;
             }
             ul {
                 width: 450px;
                 border: 1px solid green;
                 margin: 20px auto;
             }
             li {
                 margin: 5px;
                 background: #ccc;
             }
             li img {
                 height: 100px;
                 display: block;
             }
             li span {
                 color: #ff5701;
                 font: 25px/1 "";
             }
         </style>
         <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
         <script>
             $.getJSON("practice.json",function(json){
                 //console.log(json.goods);
                 //console.log(json.goods[0]);
                 //console.log(json.goods[0].price);
                 var goods = json.goods;
                 $.each(goods,function(j){
                      $("<li>" + "<img src='" + goods[j].pic + "' />" + goods[j].name + "<br />" + "<a href='#'>" +goods[j].description + "</a>" + "<br />" + "<span>" + "¥：" + goods[j].price + "</span>" + "</li>").appendTo($("ul"));
                      console.log(goods[j].name);
                 });
             });
         </script>
    </head>
    <body>
         
         <ul>
             
         </ul>
    </body>
</html>

 

 
json文件内容如下↓
{
    "goods": [
         {"pic":"img/1.jpg","name":"男鞋","description":"【热销1万双】骆驼沙滩鞋凉鞋 男女士休闲运动凉鞋夏","price":"119"},
         {"pic":"img/2.jpg","name":"连衣裙","description":"夏天连衣裙女装2017新款夏季韩版时尚显瘦裙子粉色","price":"219"},
         {"pic":"img/3.jpg","name":"荷叶边","description":"正品代购明星杨幂同款连衣裙新款海滩假日荷叶边气","price":"78"},
         {"pic":"img/4.jpg","name":"一字领","description":"一字领露肩连衣裙夏韩范收腰腰带短袖刺绣蓝色竖条","price":"233"},
         {"pic":"img/5.jpg","name":"旗袍","description":"中老年真丝连衣裙旗袍夏装短款女装显瘦桑蚕丝2017新款妈","price":"159"},
         {"pic":"img/6.jpg","name":"小香风","description":"原创设计师泰国OL小香风蝴蝶结夜店黑色显瘦a字连","price":"301"}
    ]
}

效果图↓


 












            

            
posted @ 
2017-08-18 14:32 
LLLLily 
阅读(903) 
评论(0) 
编辑 
收藏 
举报