Ajax移动端新闻含搜索与缓存代理的功能

最新推荐文章于 2021-09-11 10:40:01 发布

源源不断、、

最新推荐文章于 2021-09-11 10:40:01 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_41897598/article/details/81182186

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<style>
*{
margin: 0;
padding: 0;
}

.title{
width:100%;
height: 1.5rem;
background-color: aqua;
border-radius: 5px;
}
.title h3{
position: relative;
left:0.5rem;
float: left;
text-align: left;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 0.5rem;
color:white;
line-height:1.5rem;
}
.title input{
display:block;
border-radius:5px;
float:right;
width:3rem;
height:0.5rem;
position: relative;
top:0.5rem;
right:3rem;
font-size: 0.5rem;
}
ul{
position: relative;
top:0rem;

}
li{
   position: relative;
font-size: 0.5rem;
list-style: none;
margin:0.15rem;
border: 0.5px solid black;
height: 1.5rem;
border-radius: 5px;
}
li div{
   position: absolute;
   top:0.2rem;
/*   float: left;*/
   left:1.2rem;

}
li img{
   float: left;
}
.title button{
position: relative;
float:right;
right:-1.5rem;
top:0.5rem;
border-radius:5px;
display:block;
width:1rem;
height:0.5rem;
font-size: 0.3rem;
}
.contens{
position: relative;
top:1.5rem;
width: 100%;
height:12rem;
}
a{
text-decoration: none;
}
.foot{
position: fixed;
bottom: 0rem;
width: 100%;
height:0.5rem;
}
.foot .btn1{
position: absolute;
display: block;
left:2rem;
width: 1.4rem;
height: 0.5rem;
font-size: 0.3rem;
color: green;
border-radius:5px;
}
.foot .btn2{
position:absolute;
display: block;
right:2rem;
width: 1.4rem;
height: 0.5rem;
font-size: 0.3rem;
color: green;
border-radius:5px;
}
img{
   position:absolute;
   top:0.25rem;
   left: 0.2rem;
   display:block;
   width: 1rem;
   height: 0.7rem;
}
</style>
</head>
<body>
<div class = 'title'>
<h3>一点新闻</h3>
<input type = 'text'/ placeholder="输入关键字">
<button>搜索</button>
</div>
<div class = 'contents'></div>
<div class = 'foot'>
<button class="btn1">第一页</button>
<button class="btn2">下一页</button>

</div>
<script>
(window.onresize = function(){
   document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/10+'px';
})();
var btn = document.querySelector('.title button');
var body = document.querySelector('body');
var contents = document.querySelector('.contents');
var btn2 = document.querySelector('.foot .btn2');
var btn1 = document.querySelector('.foot .btn1');
var cache = {};//创建缓存池；
var URL = 'https://route.showapi.com/109-35?';
var title = '娱乐';
var page = 1;
getData();
function getData(){
var paramets = {
page:page,
showapi_appid:58862,
showapi_sign:'74eadf3d73ee48c6a4a785e6ef340499',
maxResult:10,
title:title,
needAllList:0,
needContent:0,
needHtml:0
}
var arr = [];
for(var key in paramets){
arr.push(key+'='+paramets[key]);
}//添加到数组
var sendData = arr.join('&');//加入链接符号
console.log(sendData);
var xhr = new XMLHttpRequest();//创建AJAX对象
xhr.open('GET',URL+sendData,true);//调用open方法
xhr.send(null);//调用send方法
//回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState === 4&& xhr.status === 200){
var data = JSON.parse(xhr.response); //获取数据
var dataList = data.showapi_res_body.pagebean.contentlist;
cache[page] = dataList;
renderData(dataList);
console.log(dataList);
}
else {
console.log(xhr.readyState,xhr.status);
}
}
}
//渲染数据
function renderData(datas){
var len = datas.length;
var spl ='';
for(var i = 0;i<len;i++){
   console.log(datas[i].imageurls.length);
if(datas[i].imageurls.length <= 0){//判断是否有图片；
spl += `
<a href = '${datas[i].link}'>
<ul><li>
<div> ${datas[i].title}</div>
</li></ul>

</a>
`;
}
else{
spl += `
<a href = '${datas[i].link}'>
<ul>
<li>
<img src = '${datas[i].imageurls[0].url}' alt = '图片'/>
<div> ${datas[i].title}</div>
</li>
</ul>
</a>
`;
}
}
contents.innerHTML=spl;
}
//事件绑定处理函数
btn.onclick = function(){
var input = document.querySelector('input');
title = input.value;
contents.innerHTML = '';
getData();
}
btn2.onclick = function(){
page++;
contents.innerHTML = '';
//判断缓存池里是否有数据
if(page in cache){
renderData(cache[page]);

}
else{
getData();
}

}
btn1.onclick = function (){
contents.innerHTML = '';
page = 1;
if(page in cache){
renderData(cache[page]);
}
else{
getData();
}

}

</script>
</body>
</html>

源源不断、、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax移动端新闻含搜索与缓存代理的功能

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Title&amp
复制链接

扫一扫