ajax异步请求，$.each遍历拼接数据
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，所以直接看我的代码可能有点花眼
