　　　　　　　　　　用$.getJSON() 和$.post()获取第三方数据做页面

首页 index.html 页面

　　需要jquery 　和 template-web js文件可以直接在官网下载

中间导航条的固定

可以在导航添加一个动态class值 class值的css样式 position ：fixed ；

$(document).ready(function() {

var $window = $(window),

$mainMenuBar = $('#mainMenuBar'),

$mainMenuBarAnchor = $('#mainMenuBarAnchor');

$window.scroll(function() {

var window_top = $window.scrollTop();

var div_top = $mainMenuBarAnchor.offset().top;

if (window_top > div_top) {

$mainMenuBar.addClass('stick');

$mainMenuBarAnchor.height($mainMenuBar.height());

} else {

$mainMenuBar.removeClass('stick');

$mainMenuBarAnchor.height(0);

}

});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="index.css"><title>惠品折首页</title>
</head>
<body><header><div id="top"><img src="http://m.huipinzhe.com/static/img/logo.jpg" alt="logo"><input type="text"><a href="category.html" target="_self"><img src="./images/menu.png" alt="search"></a></div> </header><img id="banner" src="http://huipinzhe-img-03.b0.upaiyun.com/banner1009/梁荷750.png" alt=""><img id="banner1"  src="./images/banner.png" alt=""><div id="mainMenuBarAnchor"></div><div id="mainMenuBar"><ul id="ul"></ul></div><div id="bottom"><a href="index.html"><img src="data:images/home.png" alt=""></a><a href="specialList.html"><img src="data:images/juan.png" alt=""></a><a href="find.html"><img src="data:images/miao.png" alt=""></a><a><img src="data:images/my.png" alt="">  </a></div>   <section id="container"><section><script id="goods" type="text/html">{{each rows good }}{{if good.itemType=="TIANMAO"}}<div class="good"><img src="  {{good.image}}"><div><p><span>天猫</span>{{good.title}}</p><p class="zi">活动价￥{{good.phoneActivityPrice}} </p><p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p></div>   </div>
                {{else if  good.itemType=="TAOBAO"}}<div class="good"><img src="  {{good.image}}"><div><p><span>淘宝</span>{{good.title}}</p><p class="zi">活动价￥{{good.phoneActivityPrice}} </p><p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p></div>  </div>
            {{/if}}
            {{/each}}</script><script src="jquery.js"></script><script src="template-web.js"></script><script src="index.js"></script>
</body>
</html>

首页css 样式 index.css

*{box-sizing: border-box;
}
html{height: 100%;}
body{height: 100%;margin: 0;padding: 0;background-color: gainsboro;
}
header{background-color: white;height: 8%;position: fixed;top: 0;left: 0;right: 0;box-shadow:  0 0 10px  gainsboro;z-index: 100;}
#top{display: flex;align-items: center;height: 100%;/* background-color: red; */position: relative;
}
#top >img:nth-child(1){width: 140px;  margin-left: 20px;}
#bottom{position: fixed;bottom: 0px;z-index:100;width: 100%;height: 8%;background-color: white;display: flex;justify-content: space-around;
}
#bottom>a{display: inline-block;height: 100%;
}
#bottom>a>img{display: inline-block;height: 100%;
}
#top>input{margin-left: 30px;border-color:  gainsboro;background-color: gainsboro;height: 60%;width:70%;border:none;border-radius: 35px;
}#top>img:nth-child(3){width:80px;height: 80%;position: absolute;right: 10px;
}
#banner{/* display: block; */margin-top: 13% ;width: 100%;margin-bottom: 15px;
}
#banner1{/* margin-top: 13%; */width: 100%;
}
#ul>li:first-child{color:red;border-bottom: 2px solid red;
}
#ul >li{list-style: none;display:inline-block;color:black;margin-left:50px;font-size:30px;font-weight:100;line-height: 80px;
}
#mainMenuBar{width:100%;white-space:nowrap ;overflow-x: scroll;background-color: white;z-index:100;
}
.stick {border-top: 8px solid   gainsboro;margin-top: 13.5% ;position:fixed;top:0;
}
#container{height: 100%;width:100%;overflow: scroll;
}
.good{width:100%;font-size: 30px;background-color: white;padding-top:15px;margin-bottom: 30px;
}
.good >img{width: 40%;display: inline-block;
}
.good>div{display: inline-block;width: 55%;
}

首页js文件 index.js

$.getJSON('http://m.huipinzhe.com/h5/home/gethomepage',function(data){console.log(data);$('#banner').attr('src',data.data.HomeModelList[0].rows[0].image);var labels=data.data.labels;console.log(labels);for(var i=0;i<labels.length;i++){$('#ul').append('<li class="'+labels[i].id+'">'+labels[i].label+'</li>');}$(document).ready(function() {var $window = $(window),$mainMenuBar = $('#mainMenuBar'),$mainMenuBarAnchor = $('#mainMenuBarAnchor');$window.scroll(function() {var window_top = $window.scrollTop();var div_top = $mainMenuBarAnchor.offset().top;if (window_top > div_top) {$mainMenuBar.addClass('stick');$mainMenuBarAnchor.height($mainMenuBar.height());} else {$mainMenuBar.removeClass('stick');$mainMenuBarAnchor.height(0);}});});//初始值//商品列表初始
    clickTurn(-1);//导航鼠标的点击事件$('#ul>li').click(function(){$(this).css({color:'red','border-bottom': '2px solid red',}).siblings().css({color:'black','border-bottom':'none',});var labelId=$(this).attr('class');//清空container中的内容 添加新的内容// $('#container').empty();
        clickTurn(labelId);});});/* 推荐商品列表 */
function clickTurn(labelId){var page=0;var isFinsh;function getDataByPageNumber(){isFinsh=false;page++;if(page>12){alert('已经加载完毕');return;}$.post('http://m.huipinzhe.com/h5/home/gethomepage',{labelId : labelId ,pageNum : page},function(data){console.log(data.data.onlineData);var data=data.data.onlineData;var html=template('goods',data);$('#container').html(html);isFinsh=true;});}getDataByPageNumber();$('#container').scroll(function(event){console.log("滚动");if(event.target.scrollTop+event.target.clientHeight>event.target.scrollHeight-10){console.log('获取下一页数据');if(isFinsh){getDataByPageNumber();}   }  });
}

转载于:https://www.cnblogs.com/shaoxiaohuan/p/7661184.html

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）相关推荐

使用WebService技术获取第三方数据实现繁体字转换 WEB 服务
Web Service(WEB服务) 能够快捷和方便地综合并结合各种系统.商务和任何应用平台.新出现的 Web Services 标准: SOAP.WSDL 和 UDDI 能够使任何系统和系统之间的应 ...
vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
ts获取服务器数据_怎么使用Satruts2实现页面列表数据导出到Excel表格
Java codeprivate InputStream excelFile; public void setExcelFile(InputStream excelFile) { this.excel ...
第一方数据，第二方数据，第三方数据，都是什么意思？
数据无处不在--我们每天创造超过2.5艾字节(exabytes)的数据,研究人员预测到2025年将会有163泽字节(zettabytes)的数据.此外,还有许多种类的数据与企业有关.我们有第一方,第三 ...
使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
echarts图表动态获取后台数据详解（二）
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
java $.getjson_JQuery 获取json数据$.getJSON方法的实例代码
jQuery系列第八章 jQuery框架Ajax模块第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是A ...
$get服务器上的json文件,Web前端：$.getJSON获取json数据失败
JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式.它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本 ...
数据分析实例-获取某宝评论数据做词云图可视化
获取数据首先要通过抓包分析网站的数据接口是什么,再构造请求头,发送请求,解析数据,最后保存数据.本项目以某宝上的一个商品的评论数据为例进行获取. 爬虫主代码: import requests imp ...

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）

用$.getJSON() 和$.post()获取第三方数据做页面

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）相关推荐

最新文章

热门文章