一个案例——忘记的时候可以翻阅参考↓<务必放在服务器内才能看效果哟~>
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"} ] }
效果图↓
