jquery-ajax 获取json，遍历新闻到dom

时间 2019-11-17

标签 jquery ajax 获取 json 遍历 dom 栏目 JQuery 繁體版

原文原文链接

【基本思路】

建立数据源，一个静态页html，内放json格式的新闻内容；
前端页面结构写好，
ajax数据请求，转换json为obj对象，最后执行遍历循环取值。

效果图以下：javascript

【主页面代码以下：】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax-新闻遍历</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
		<style>
			.badge{ margin-right: 15px; background: #003399;}
		</style>
	</head>
	<body>
		<button type="button" class="btn btn-default btn-sm" id="btn_get" value="">获取新闻</button>
		<div class="panel">
			<ul class="list-group">
				 
			</ul>
		</div>
		
	</body>
</html>

<script type="text/javascript">
	$(function(){
		$("#btn_get").click(function(){
			$.ajax({
				url:"news.html?"+Math.random(),  //带个随机数，防止缓存
				type:"get",
				success:function(data){
					
					console.log("初始类型"+typeof data) //string
					console.log("数据打印"+data)       
					
					var obj = JSON.parse(data);  //json字符串-->JavaScript对象
					console.log("转换后格式"+typeof obj) //object
					
					for( var i= 0; i<obj.length; i++){
						$(".list-group").append(
							'<li class="list-group-item">'+obj[i].title+'<span class="badge">'+obj[i].time+'</span></li>'
						);
					}
				}
			});
		});
		
	})
</script>

【数据源 new.html代码以下：】

[
{
"title":"氧车乐汽车官网上线",
"time":"2017-11-12"
},
{
"title":"氧车乐汽车系统开发完毕",
"time":"2018-10-09"
},
{
"title":"氧车乐汽车系统开发完毕",
"time":"2018-10-09"
}
]

主页面console返回的值截图以下：css

1. 【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中
2. cookie 获取遍历
3. jquery遍历 DOM树遍历
4. DOM遍历
5. 遍历DOM树
6. 0003-DOM遍历
7. json遍历，List>遍历
8. JSONObject遍历获取键值
9. JS DOM操做（建立、遍历、获取、操做、删除节点）
10. 浅谈Dom遍历
更多相关文章...
• XML DOM 遍历节点树 - XML DOM 教程
• XML DOM 获取节点值 - XML DOM 教程
• C# 中 foreach 遍历的用法
• 算法总结-股票买卖