ajax異步請求，$.each遍歷拼接數據
自己在做一個前後端分離的demo，現在需要用ajax異步請求後端數據，然後用jquery的$.each遍歷，然後拼接數據。
自己查閲資料，找到了一個很好的例子，按照自己的需求先用data.json來進行測試，測試成功了，稍作修改拿到我的前端代碼上可以拿到數據了！雖然對大家來説，這是個基本操作，但我前端知識比較差勁，能做出來，真的開心很久！
我整理了一下，希望對javascript和jquery基礎差的同學們會有所幫助，這裏因為要仿寫一個網站，所以拼接的內容在div標籤裏，在本篇博客末尾，我也會放兩篇博客地址，分別是拼接table和div的，希望對大家有所幫助，不懂的可以留言。
data.json
{
"code": 0,
"msg": "",
"count": 11,
"data": [
{
"id": 1,
"name": "彩虹會掉色嘛",
"title": "淘寶裝修店鋪需要多少錢？有哪些技巧？",
"type": "裝修經驗",
"reader": "8787",
"content": "在淘寶平台上開網店需要裝修店鋪，而且裝修店鋪並不是一成不變的，在報名參加大促活動的時候，"
},
{
"id": 2,
"name": "彩虹會掉色嗎",
"title": "淘寶滯銷商品會影響店鋪權重嗎？",
"type": "店鋪診斷",
"reader": "8666",
"content": "商家運營淘寶店，都不想自己店鋪有滯銷商品，畢竟店鋪出現滯銷商品對店鋪的影響還是比較大的"
},
{
"id": 3,
"name": "彩虹會掉色嘛",
"title": "淘寶動態評分低怎麼提升？應該怎麼做？",
"type": "運營策劃",
"reader": "6666",
"content": "淘寶店鋪的動態評分太低的話，對店鋪是有一定影響的。買家在淘寶購物的時候"
},
{
"id": 4,
"name": "彩虹會掉色嘛 ",
"title": "新手做淘寶客服難嗎？客服要做哪些事？",
"type": "團隊管理",
"reader": "7777",
"content": "淘寶客服是個繁瑣的工作，所以，很多新手開店時也在詢問做客服難不難?為了解答大家的這疑問"
},
{
"id": 5,
"name": "彩虹會掉色嘛 ",
"title": "天貓和淘寶哪個權重好?",
"type": "淘寶推廣",
"reader": "6666",
"content": "天貓和淘寶是經常會被拿來對比的平台，對於商家而言這兩個平台哪個權重高點?"
},
{
"id": 6,
"name": "彩虹會掉色嘛 ",
"title": "怎麼看自己淘寶好評率？淘寶好評率如何提升？",
"type": "運營策劃",
"reader": "8888",
"content": "淘寶商家很重視自己店鋪的好評率，畢竟店鋪好評多，對店鋪肯定有好處，那麼大家知道作為淘寶"
},
{
"id": 7,
"name": "彩虹會掉色嘛 ",
"title": "怎樣提高淘寶店鋪層級？快速提高店鋪層級方法",
"type": "運營策劃 ",
"reader": "9999",
"content": " 我們知道針對商家而言，店鋪層級越高，就説明淘寶店鋪流量越多"
},
{
"id": 8,
"name": "彩虹會掉色嘛 ",
"title": "淘寶店鋪主圖的重要性是什麼？具體分析",
"type": "網店SEO",
"reader": "6666",
"content": "淘寶商家應該都知道，一個好的主圖是能吸引用户點擊的，許多商家也會對主圖進行優化。"
},
{
"id": 9,
"name": "彩虹會掉色嘛 ",
"title": "淘寶改標題被降權怎麼辦？怎麼預防被降權？",
"type": "手機淘寶 ",
"reader": "2333",
"content": "淘寶賣家們為了能夠優化標題，因此也會對現有的標題進行調整和修改"
},
{
"id": 10,
"name": "彩虹會掉色嘛 ",
"title": "淘寶單品被降權還可以刷嗎？",
"type": "淘寶規程",
"reader": "8888",
"content": "單品一旦違規就要被降權、扣分，這裏説的違規是一個籠統的説法"
},
{
"id": 11,
"name": "彩虹會掉色嘛 ",
"title": "影響淘寶寶貝標題權重的因素是什麼？",
"type": "店鋪診斷",
"reader": "8888",
"content": "淘寶寶貝標題在搜索中佔據重要位置，所以，很多人也想知道寶貝標題權重的因素是什麼?"
}
]
}html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wenti-list mt30">
<ul class="taobao-article-ul">
<li >
<div class="taobao-article-item">
<a class="article-item-imgbox"href="/article/20201217145646.htm" style="max-height: 150px">
<img src="static/picture/5fdb011f33cc3.png" width="200" height="150"> </a>
<div class="article-item-right">
<a class="article-item-content" href="https://www.kaitao.cn/article/20201217145646.htm">
<h5>淘寶裝修店鋪需要多少錢？有哪些技巧？</h5>
<p>在淘寶平台上開網店需要裝修店鋪，而且裝修店鋪並不是一成不變的，在報名參加大促活動的時候，還需要裝修設計大促承接頁，對於一些小賣家來説非常關心淘寶裝修店...
</p></a>
<div class="article-item-info"> <img src="static/picture/noavatar.jpg">
<i class="article-item-username">彩虹會掉色嘛</i>
<a href="/zhuangxiujingyan" class="article-item-category">裝修經驗</a>
<i class="article-item-count">8787人閲讀</i>
<span class="article-item-time">2020-12-17 14:56:55</span> </div>
</div>
</div>
</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url: "data.json", //json文件位置
type: "GET", //請求方式為get
dataType: "json", //返回數據格式為json
contentType: "application/json; charset=utf-8",
success: function(data) { //請求成功完成後要執行的方法
//var data = data.data//這個測試不需要加這句
var html = "";
$.each(data, function(i, item) { //這裏的函數參數是鍵值對的形式，i代表鍵名，item代表值
html += '<li> ';
html += '<div class="taobao-article-item">';
html += '<a class="article-item-imgbox" href="/article/20201217145646.htm" style="max-height: 150px">';
html += '<img src="img/' + item.fileName + '" width="200" height="150"></a>';
html += '<div class="article-item-right">';
html += '<a class="article-item-content" href="https://www.kaitao.cn/article/20201217145646.htm">';
html += ' <h5>' + item.title + '</h5><p>' + item.content + '</p></a>';
html += ' <div class="article-item-info">';
html += ' <img src="static/picture/noavatar.jpg">';
html += ' <i class="article-item-username">' + item.name + '</i>';
html += ' <a href="/zhuangxiujingyan" class="article-item-category">' + item.type + '</a>';
html += ' <i class="article-item-count">' + item.reader + '</i>';
html += ' <span class="article-item-time">2020-12-17 14:56:55</span> </div></div></div></li></ul>';
});
$(".taobao-article-ul").append(html);
}
})
})
</script>
</body>
</html>注意：
- 圖片地址會顯示錯誤，，但對學習$.each拼接數據沒有影響
- 我要這段數據按照樣式呈現在頁面上，所以我需要遍歷一個div裏的整個div，所以直接看我的代碼可能有點花眼
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。