ajax 动态添加商品列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//自定义模板
<script type="text/template" id="app_tpl">
<div class="product">
<div class="imageContainer">
<img src="{#img#}" />
<div class="layer">
<p>找同款</p>
<p>找相似</p>
</div>
</div>
<div class="concent">
<p class="price">
<span class="price-text">￥{#price#}</span>
<span class="sum">{#sales#}人付款</span>
</p>
<p class="title">{#title#}</p>
<p class="stroe">
<span class="stroe-title">{#store#}</span>
<span class="adress">{#adress#}</span>
</p>
</div>
</div>
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#app {
width: 1088px;
margin: 50px auto;
font-family: "微软雅黑";
}
.product {
width: 250px;
height: 360px;
float: left;
border: 1px solid #ccc;
margin: 10px;
}
.product:hover{
border: 1px solid #555B24;
}
.imageContainer{
position: relative;
width: 250px;
height: 250px;
}
.product:hover .layer {
display: block;
}
.layer{
height:40px ;
background: #F55B24;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.layer p {
width: 125px;
float: left;
line-height: 30px;
color: #fff;
font-size: 12px;
text-align: center;
}
.content {
padding: 10px;
}
.content .price {
width: 100%;
line-height: 40px;
height: 40px;
}
.price{
height: 30px;
}
.price .price-text {
color: #F55B24;
font-size: 20px;
float: left;
font-weight: bold;
}
.price .price-text span{
color: #fff;
font-size:12px;
background: #F55B24;
font-weight: 400;
vertical-align: top;
}
.price .sum {
color: #999;
font-size: 12px;
display: inline;
float: right;
}
.title {
color: #666;
font-size: 12px;
}
.stroe {
width: 100%;
color: #999;
font-size: 12px;
line-height: 30px;
}
.stroe .store-title {
float: left;
}
.stroe .adress {
float: right;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
//js
<script type="text/javascript">
//js命名空间 定义一个工具方法库
var Util = {
//获取获取元素数
id: function(id) {
return document.getElementById(id);
},
//封装ajax方法
ajax: function(url, callback) {
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//订阅事件
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
callback && callback(data);
}
}
}
xhr.open("get", url, true);
xhr.send(null);
}
}
//格式化字符串
function formDataString(str,data){
return str.replace(/\{#(\w+)#\}/g,function(match,$1){
// console.log(this,1) //this作用域
// console.log(arguments,2)//参数列表
return data[$1]===undefined?"":data[$1];
});
}
var tpl = Util.id("app_tpl").innerHTML;
var html="";
Util.ajax("data/list.json",function(data) {
var data=data.list;
for(var i=0;i<data.length;i++){
html+=formDataString(tpl,data[i])
}
Util.id('app').innerHTML=html;
})
</script>
</html>
//list.json
{
"errno": 0,
"list": [
{
"img": "images/1.jpg",
"price": "798.00",
"sales": "8",
"title": "帛薇儿2017春装新款女装条纹拼接连衣裙蝴蝶结中长款真丝连衣裙 ",
"store": "pokwai服饰旗舰店",
"adress": "广东 深圳"
},
{
"img": "images/2.jpg",
"price": "168.00",
"sales": "2946",
"title": "加棉毛呢短外套短款刺绣棒球服女秋冬季2016新款潮加厚含羊毛呢子 ",
"store": "妍蝶旗舰店",
"adress": "浙江 杭州"
},
{
"img": "images/3.jpg",
"price": "699.00",
"sales": "974",
"title": "【多件多折】ochirly欧时力翻领羊毛呢大衣长外套1YY3345910 ",
"store": "ochirly官方旗舰店",
"adress": "广东 广州"
},
{
"img": "images/4.jpg",
"price": "19.90",
"sales": "584",
"title": "秋冬季女装新款2016黑色打底衫女长袖t恤白色纯棉上衣修身衣服潮 ",
"store": "娇人圣典旗舰店",
"adress": "福建 厦门"
},
{
"img": "images/5.jpg",
"price": "38.89",
"sales": "430",
"title": "新款韩版黑白条纹修身2016长袖T恤女秋打底衫莫代尔大码女装上衣 ",
"store": "xy服饰旗舰店",
"adress": "广东 东莞"
},
{
"img": "images/6.jpg",
"price": "89.90",
"sales": "8637",
"title": "中老年女装冬装棉衣妈妈装羽绒棉服中长款毛领外套老年人加厚棉袄 ",
"store": "胖胖家衣橱",
"adress": "浙江 嘉兴"
},
{
"img": "images/7.jpg",
"price": "69.00",
"sales": "3085",
"title": "秋冬季新款加绒加厚卫衣女装套头宽松韩版潮学生圆领长袖上衣外套 ",
"store": "米子旗旗舰店",
"adress": "广东 广州"
},
{
"img": "images/8.jpg",
"price": "49.90",
"sales": "3733",
"title": "百搭毛衣线衣韩版女装套头打底针织衫短款上衣秋冬季潮外套宽松 ",
"store": "黎雪儿旗舰店",
"adress": "江苏 苏州"
},
{
"img": "images/9.jpg",
"price": "19.00",
"sales": "355",
"title": "中老年女装冬装棉衣妈妈装羽绒棉服中长款毛领外套老年人加厚棉袄 ",
"store": "娟子裤行",
"adress": "上海"
},
{
"img": "images/10.jpg",
"price": "118.00",
"sales": "968",
"title": "2016女装新款秋冬装针织衫女开衫百搭短款毛衣外套女秋冬季韩版潮 ",
"store": "玛思狄拉旗舰店",
"adress": "浙江 嘉兴"
},
{
"img": "images/11.jpg",
"price": "53.00",
"sales": "490",
"title": "2016秋冬季新款娃娃领女装针织衫套头打底衫修身毛衣女短款上衣潮 ",
"store": "诗梵米亚旗舰店",
"adress": "浙江 嘉兴"
},
{
"img": "images/12.jpg",
"price": "28.80",
"sales": "2419",
"title": "秋冬新款女装纯色麻花毛衣女套头韩版圆领短款针织衫上衣打底衫厚 ",
"store": "沐晗旗舰店",
"adress": "江苏 苏州"
}
]
}
ajax 动态添加商品列表的更多相关文章
- jquery获取不了ajax动态添加的内容的解决办法
在HTML页面的一个button <div class="ajaxClick"> <button>内容</button> </div> ...
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
<div class="control-group " style="top: -20px;position: relative;"> <la ...
- ajax动态添加复选框
function getLands() { $.ajax({ url:"httpserver.do?doPost&userQygs="+$("#userQygs& ...
- ajax动态添加的li不能绑定click事件
单纯的给li标签添加click事件,是不会执行的. 经过试验 <ul id="searchedUser"><li>搜索结果</li></u ...
- 原生ajax动态添加数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 学习笔记12之通过ajax动态添加选项
- 移动端，ajax 动态加载的元素，为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- 商城项目:商品列表ajax加载，ajax加入购物车--五张表的联合查询
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductLists.a ...
随机推荐
- ob缓存
ob的基本原则:如果ob缓存打开,则echo的数据首先放在ob缓存.如果是header信息,直接放在程序缓存.当页面执行到最后,会把ob缓存的数据放到程序缓存,然后依次返回给浏览器.下面我说说ob的基 ...
- Android 如何本地加载pdf文件
大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上 ...
- Ruby中有意思的块
块:是在调用方法时,能与参数一起传递的多个处理的集合 简单点说,跟在方法执行后面的do |变量| end就是一个块,这个块会被传入方法中去执行! 这个非常厉害,非常有意思! 在ruby中,如果需要便利 ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- [C#学习]1.Hello World
在很多时候我们都是被helloworld带入编程的世界的,所以这句话应该算是我们程序员最熟悉的一句话了把.所以在这里,那我也照样以helloworld为例子来引入我们的C#学习. 在往常的hellow ...
- Mysql net start mysql启动,提示发生系统错误 5 拒绝访问,原因所在以及解决办法
1,Mysql net start mysql启动,提示发生系统错误 5 拒绝访问 在dos下运行net start MySQL 不能启动mysql!提示发生系统错误 5:拒绝访问!切换到管理员模式 ...
- 关于jstl.jar引用问题及解决方法
在前文SSM说到因为从MyEclipse换成了Eclipse.有些架包自动缺失. 造成:"org.apache.jasper.JasperException: This absolute u ...
- oracle linux 6.5 安装 oracle 12cR2数据库(2)-DBCA建库
援引:http://www.cnblogs.com/kerrycode/p/3386917.html by 潇湘隐者 Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引 ...
- 全球移动互联网大会gmic 2017为什么值得参加？
长城会CEO郝义认为,"科学产业化将会推动科学复兴,"而本次GMIC 北京 2017也将首次引入了高规格科学家闭门峰会,专门设置G-Summit全球科学创新峰会,以"科学 ...
- TCP协议总结
TCP的特性 TCP提供一种面向连接的.可靠的字节流服务 在一个TCP连接中,仅有两方进行彼此通信.广播和多播不能用于TCP TCP使用校验和,确认和重传机制来保证可靠传输 TCP给数据分节进行排序, ...