ajax异步请求，$.each遍历拼接数据
jquery ajax例子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" >
<img src="static/picture/5fdb011f33cc3.png" width="200" height="150"> </a>
<div class="article-item-right">
<a class="article-item-content" href="www.kaitao/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="/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" >';
html += '<img src="img/' + item.fileName + '" width="200" height="150"></a>';
html += '<div class="article-item-right">';
html += '<a class="article-item-content" href="www.kaitao/article/20201217145646.htm">';
html += ' <h5>' + item.title + '</h5><p>' + t + '</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">' + pe + '</a>';
html += ' <i class="article-item-count">' + ader + '</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>
注意：
1. 图⽚地址会显⽰错误，，但对学习$.each拼接数据没有影响
2. 我要这段数据按照样式呈现在页⾯上，所以我需要遍历⼀个div⾥的整个div，所以直接看我的代码可能有点花眼
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论