ajax获取后端数据展示

2017-12-12 08:24:18来源:CSDN作者:hjw453321854人点击

分享

效果图:


原生js实现:

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">*{margin:0;padding:0;}li{list-style:none;}#box{width:500px;height:640px;border:1px solid #ccc;position:relative;top:50%;left:50%;margin:20px -250px;}#box .con{width:500px;height:560px;}#box .con .item{height:59px;margin:10px 0;border-bottom:1px solid #ccc;display:block;cursor:pointer;}#box .con .item img{width:60px;height:50px;float:left;display:block;margin-left:10px;}#box .con .item .test{width:400px;height:50px;float:right;}#box .con .item .test p{width:300px;font-size:16px;color:#333;text-align:left;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}#box .con .item .test .ft{width:50px;height:50px;line-height:50px;font-size:20px;color:#333;text-decoration:center;display:inline-block;float:right;}#box .page{width:500px;height:31px;}#box .page ul{height:31px;margin-top:10px;}#box .page ul li{width:30px;height:30px;line-height:30px;float:left;margin-left:40px;font-size:24px;border:1px solid #666;text-align:center;cursor:pointer;}#box .page ul .active{background:#ccc;}</style></head><body><div id="box">	<div class="con"></div>	<div class="page">		<ul>			<li class="active">1</li>			<li>2</li>			<li>3</li>			<li>4</li>			<li>5</li>			<li>6</li>		</ul>	</div></div><script type="text/javascript">//加载第一页window.onload=function(){	var url1='https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8'    inteData(url1);}function inteData(url){	var xmlhttp=new XMLHttpRequest();	var str="";	xmlhttp.onreadystatechange=function(){		if(this.readyState==4&&this.status==200){		myArr = JSON.parse(this.responseText);		for(var i=0;i<myArr.showapi_res_body.newslist.length;i++){			str +=			`			<a class="item" href="${myArr.showapi_res_body.newslist[i].url}">				<img src="http://www.tanzhouphp.com/tanzhoue/images/newsList/${1+(i)}.jpg">				<div class="test">					<p>${myArr.showapi_res_body.newslist[i].title}</p><div class="ft">></div>				</div>			</a>				`			document.querySelector('.con').innerHTML=str			}		}		}	xmlhttp.open("GET",url,true)	xmlhttp.send();}//点击更新URL地址var list = document.getElementsByTagName("li");for(var i = 0;i<list.length;i++){list[i].onclick = function(){	var url ="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page="+this.innerHTML+"&num=8";	inteData(url);	}	} </script></body></html>

jq实现效果

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">*{margin:0;padding:0;}li{list-style:none;}#box{width:500px;height:640px;border:1px solid #ccc;position:relative;top:50%;left:50%;margin:20px -250px;}#box .con{width:500px;height:560px;}#box .con .item{height:59px;margin:10px 0;border-bottom:1px solid #ccc;display:block;cursor:pointer;}#box .con .item img{width:60px;height:50px;float:left;display:block;margin-left:10px;}#box .con .item .test{width:400px;height:50px;float:right;}#box .con .item .test p{width:300px;font-size:16px;color:#333;text-align:left;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}#box .con .item .test .ft{width:50px;height:50px;line-height:50px;font-size:20px;color:#333;text-decoration:center;display:inline-block;float:right;}#box .page{width:500px;height:31px;}#box .page ul{height:31px;margin-top:10px;}#box .page ul li{width:30px;height:30px;line-height:30px;float:left;margin-left:40px;font-size:24px;border:1px solid #666;text-align:center;cursor:pointer;}#box .page ul .active{background:#ccc;}</style></head><body><div id="box">	<div class="con"></div>	<div class="page">		<ul>			<li class="active">1</li>			<li>2</li>			<li>3</li>			<li>4</li>			<li>5</li>			<li>6</li>		</ul>	</div></div><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(document).ready(function(){	url="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8";	inteData(url);})function inteData(add){	$.ajax({url:add,success:function(myArr){		console.log(myArr)		var str=""		for(var i=0;i<myArr.showapi_res_body.newslist.length;i++){			str +=			`			<a class="item" href="${myArr.showapi_res_body.newslist[i].url}">				<img src="http://www.tanzhouphp.com/tanzhoue/images/newsList/${1+(i)}.jpg">				<div class="test">					<p>${myArr.showapi_res_body.newslist[i].title}</p><div class="ft">></div>				</div>			</a>				`			}			$(".con").html(str)							}	})}	$("ul li").click(function(){	$(this).addClass("active").siblings().removeClass("active")	url="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page="+$(this).index()+1+"&num=8";	inteData(url);});    </script></body></html>


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台