使用 jQuery + Ajax 完成前后端分离渲染页面
技术点
- 简单的
jQuery Ajax Get
方法的使用 - 将对象数组 渲染成 页面的DOM结构
流程
- 目前已知,通过
ajax
访问接口 将获得如下格式数据
- 此接口由我自己编写在本地运行,如果你没有接口的话,可以考虑学习nodejs来快速获得编写简单接口能力,或者留言告诉我,根据意见我会放出简单的后端代码或者出一篇文章供大家参考
- 首先使用
jquery ajax
测试一下接口能不能正常访问到数据
- 可以看到
console.log
出来了数据,没有任何问题
- 开始编写一下简单的DOM结构和css样式,并且写出一个item元素方便调试样式
- 我们现在绘制出了初步的DOM结构,虽然略显简陋,但是重点并不在此
- 使用jQuery获取数据,并赋值给
newsData
变量。 - 编写渲染方法,使用jQuery的
$.each()
方法对拿到的数据进行循环遍历,使用prepend()
方法进行向页面添加元素的操作 prepend()
方法的参数直接添加刚刚写好的item元素的DOM结构,并将其中需要变化的几个元素使用变量进行代替,我们这里直接使用遍历出每个对象的属性进行替换。- 执行加载方法
load()
,清空.content
里的DOM元素
- 刷新网页,我们可以看到数据已经成功的被渲染成DOM结构了
代码全览
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.3.1.min.js"></script>
<!-- jquery文件要换成你自己的路径 -->
<script src="./main.js"></script>
<style>
*{margin:0;padding:0;}
#app{
width:100%;
margin:0;
}
.content{
width:1000px;
margin:0 auto;
background-color: #cccc;
}
.item{
height:100px;
width:100%;
border:1px solid #4d4d4d;
}
.title{
font-size:22px;
height:60px;
display: flex;
align-items:center;
}
.cont{
display: flex;
justify-content:space-between;
height:40px;
align-items:center;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
</div>
</div>
</body>
</html>
main.js
$(function(){
let newsData = {};
// 接口需要自己写哦
$.get("http://127.0.0.1:3008/api/getnewslist", function(data, status){
console.log(data);
newsData = data.message;
load();
});
const load = () => {
$.each(newsData, function(i, n){
$(".content").prepend("<div class='item'><p class='title'>"+ n.title
+"</p><p class='cont'><span class='addtime'>发布时间:"+n.addtime+"</span><span class='click'>点击量:"+n.click
+"</span></p></div>")
})
}
})