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 遍歷的用法
• 算法總結-股票買賣

相關標籤/搜索

遍歷

jqueryajax

獲取

jqueryajax++servlet+json

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。