关于xampp连接接口，获取数据，把数据添加到页面中，加入一个翻页功能，和查找页面的功能
（用于新手的一点点JQuery,本人也在学习当中，写的不好的地方请见谅）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<title></title>
<style>
span {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
text-align: center;
line-height: 20px;
}
.page {
padding-top: 20px;
}
.blue {
background: deepskyblue;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<table border id="tables">
</table>
<div class="page">
</div>
<script src="./js/jquery-1.11.3.min.js"></script>
<script>
//这里是两个全局变量
var size = 6 //赋值为6是因为自定义想要每6个为一页
var num = 1//从第一页开始
function getList() {
$.ajax({
type: 'GET', //GET
url: 'http://120.77.38.79:8080/demo/api/product',
//参数
data: {
pageSize: size, //参数之间要用逗号隔开，不然会报错
pageNum: num //翻页，当到第二页的时候就会加一
},
dataType: 'json',
success: function(res) {
var pages = Math.ceil(res.data.pageCount / size)
//pageCount=14;ceil()函数：向上取整
// console.log(pages) 3是总共的页数，不明白的地方可以打印一下
var data = res.data.data //这里是因为接口里有两层，所以需要点2个data
//console.log(res.data)
$("#tables").empty() //.empty()删除匹配的元素集合中所有的子节点。
//最上面一行的单元格说明
$("#tables").append('<tr><th>手机名称</th><th>报价</th><th>手机图片</th></tr>')
for (var j = 0; j < data.length; j++) {
$("#tables").append('<tr><td>' + data[j].name + '</td><td>' + data[j].price +
'</td><td><img src="' + data[j].image + '" /></td></tr>')
//通过for循环获取数据然后把数据添加到table表中去，这是一个拼接的动态数据，这里获取了手机名称和价格还有图片
}
$(".page").empty() //.empty()删除匹配的元素集合中所有的子节点。
//一定要清除，不然当点击其他页的按钮的时候，之前页面的数据会被保留下来
for (var i = 0; i < pages; i++) { //pages是页数，上面计算向上取整约等于3页
$(".page").append(' <span onclick="changePage(' + i + ')">' + parseInt(i + 1) + '</span>') //然后for循环去追加
}
//这里是一个点击事件的拼接
//给页面翻页的span标签要先删除清空数据(如果有数据的情况下)，然后再去追加数据，或者添加样式
$("span").removeClass("") //removeClass：从所有匹配的元素中删除全部或者指定的类。
$("span").eq(num - 1).addClass("blue") //addClass：为每个匹配的元素添加指定的类名。
//定义了blue的样式，不要写.blue，因为不是class，不然样式会不生效
}
});
}
getList() //调用这个方法
function changePage(ind) { //ind=i，是我上面for循环的值
num = ind + 1 //当第一次for循环ind等于0时，0+1=1，就会看见第一页，ind根据changePage(值)中的来进行相应的改变页面的数据
getList()
//再去调用一次这个方法
}
</script>
</body>
</html>
