ajax获取json数据展示

最新推荐文章于 2024-03-06 20:56:35 发布

戏里戏外。

最新推荐文章于 2024-03-06 20:56:35 发布

阅读量2k

点赞数 1

分类专栏： ajax+php+mysql 文章标签： ajax 数据功能 javascript jquery

本文链接：https://blog.csdn.net/hjw453321854/article/details/78775338

版权

ajax+php+mysql 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

原生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.οnlοad=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>

戏里戏外。

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
ajax获取json数据展示

效果图：原生js实现：*{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;he
复制链接

扫一扫

专栏目录