前言
hello，大家好，接下来要学习的是使用AJAX技术向服务器发送请求，获取数据，将数据渲染到页面中，最终效果如下：
内容概要
本章节主要内容是如何将我们之前学过的AJAX技术应用到项目开当中，能够使用模板字
符串``将获取到的数据渲染到页面上，并能够实现真正的动态交互。通过之前的学习，我们已经
掌握了页面动态交互所需要的所有的知识点，现在就把知识点应用到我们的卡其漫画案例中。
首先：在我们的编辑器里，直接写代码，向服务器发送AJAX请求，因为是一打开浏览器就会看到页面效果的
<script>
// 1. 发送ajax请求渲染游戏中心中的数据
$.ajax({
type:'get', // get请求，主要用于获取数据
url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/gameCenter',
success:function(res){
console.log(res)
}
})
</script>第2步：当数据请求回来之后，使用模板字符串进行数据的拼接
<script>
// 1. 发送ajax请求渲染游戏中心中的数据
$.ajax({
type:'get', // get请求，主要用于获取数据
url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/gameCenter',
success:function(res){
// 2. 准备模板字符串
var arr = []
for(var i=0;i<res.data.length;i++){
var data = res.data[i]
var str = `<li>
<a href='chapter.html'>
<img src="${data.src}" alt="">
<p class='bookname'>${data.name}</p>
</a>
</li>`;
arr.push(str)
}
// 3. 将拼接好数据的字符串一次性渲染到页面中
$('.gamecenter ul').html(arr.join(''))
}
})
</script>效果如下：可以看到，这是渲染了真正的数据出来
下面的"最近更新"模块也是同样的道理，也是需要发送ajax 请求获取数据来渲染页面,代码如下：
// 2.1 发送ajax请求获取数据来渲染最近更新模块中的数据
$.ajax({
type:'get',
url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/lastUpdate',
success:function(res){
// 2.2 准备模板字符串
var arr = [];
for(var i=0;i<res.data.length;i++){
var data = res.data[i];
var str = ` <li>
<a href='chapter.html'>
<img src="${data.src}" alt="">
<div class="info">
<p class="bookname">${data.name}</p>
<p class="auther">${data.tag}</p>
<p class="lastchapter">最后更新:${data.update}话</p>
</div>
</a>
</li>`;
arr.push(str)
}
// 2.3 将数据渲染到页面上
$('.lastupdate ul').html(arr.join(''))
}
})同理，右侧的游戏中心也是这样的一个思路，也是需要发送ajax请求，获取数据，来渲染页面，代码如下：
// 3.1 发送ajax请求获取数据来渲染游戏中心中的数据
$.ajax({
type:'get',
url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/gameCenter2',
success:function(res){
if(res.code==200){
// 3.2 准备模板字符串
var arr = []
for(var i=0;i<res.data.length;i++){
var data = res.data[i]
var str = `<li>
<a href='chapter.html'>
<img src="${data.src}" alt="">
<p>${data.name}</p>
</a>
</li>`;
arr.push(str)
}
// 3.3 将数据渲染到页面上去
$('.pull-right .gamecenter ul').html(arr.join(''))
}
}
})卡其漫画页面效果图如下：
至此呢，我们已经使用学过的知识点，已经完全的应用到了卡其漫画这个小项目当中了，
在学会了的同时，一定要多敲多练，继续巩固所学成果，相信大家都会有一个不错的学习体
验。
