title: 从后台获取数据通过ajax的形式渲染到浏览器
tags: ajax
categories: angularJS
date: 2017-11-6
1. 首先先写静态页面，也就是死的文件，把样式调好，确保没有问题
2. 然后下载模板引擎，下载jquery
npm i template -D -S
npm i jquery -D -S
D是--dev的简写，依赖的意思，S是--save的简写
3. 在html文件里引入jquery以及模板js
<!-- import jquery -->
<script src="./js/node_modules/jquery/dist/jquery.min.js"></script>
<!-- import template -->
<script src="./js/template.js"></script>
<!-- import yourjsname.js -->
<script src="./js/yourjsname.js"></script>
4. 把之前的死页面的相关从后台获取数据的代码注释掉或者删除，用模板来写，example:
<!-- main外层li的模板渲染 -->
<!-- 注意一定要用type="text/template"，id是后面ajax里面template()要用的 -->
<script type="text/template" id="listclass">
<!-- 这里的result要根据你的api文档，看看后台的获取的是什么名字就写什么名字，其他不变 -->
{{each result as value i}}
<!-- value.titleId中，value是固定写的，titleid是根据浏览器你想获取什么数据就找对应的键值，class可加可不加，看你在css样式设置而定 -->
<li data-id="{{value.titleId}}" class="fl">
<a href="#">{{value.title}}<span class="bgi"></span></a>
<ul id="innerul" class="none"></ul>
</li>
<!-- 切记尾部一定要加上 {{/each}} -->
{{/each}}
</script>
5. ajax的写法
// main外层li的ajax请求渲染
$.ajax({
// 数据请求
url: "http://157.122.54.189:9090/api/getcategorytitle",
// 类型是get
type: "get",
// 请求数据成功后的回调函数
success: function (data) {
// 获取数据内容
var html = template("listclass", data);
// 渲染到前端
// #lis_list是你原来html死页面的大的div或者ul，这里是ul
$("#lis_list").html(html)
}
});
6. 成功案例：
6.1 html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>产品分类-慢慢买比价网</title>
<!-- 基础样式 -->
<link rel="stylesheet" href="./css/basic.css">
<!-- 清除样式 -->
<link rel="stylesheet" href="./css/normalize.css">
<!-- 引入自己的css文件 -->
<link rel="stylesheet" href="./css/listclassNew.css">
</head>
<body>
<!-- head -->
<Iframe name="top-page" width="100%" height="101px" marginwidth=0 marginheight=0 src="../public/common/comHeader.html"></Iframe>
<!-- main -->
<div class="brief">
<ul id="lis_list" class="briefin">
<!-- <li data-id="{{value.titleId}}" class="fl">
<a href="#">{{value.title}}<span class="bgi"></span></a>
<ul class="tog none">
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
<li><a href="#">平板电视</a></li>
</ul>
</li> -->
</ul>
</div>
<!-- foot -->
<iframe name="top-page" width="100%" height="100px" marginwidth=0 marginheight=0 src="../public/common/comFooter.html" id="SQkFooter"></iframe>
<!-- main外层li的模板渲染 -->
<script type="text/template" id="listclass">
{{each result as value i}}
<li data-id="{{value.titleId}}" class="fl">
<a href="#">{{value.title}}<span class="bgi"></span></a>
<ul id="innerul" class="none"></ul>
</li>
{{/each}}
</script>
<!-- main里层li的模板渲染 -->
<script type="text/template" id="innerListClass">
{{each result as value i}}
<li data-id="{{value.categoryId}}">
<a href="#">{{value.category}}</a>
</li>
{{/each}}
</script>
<!-- import jquery -->
<script src="./js/node_modules/jquery/dist/jquery.min.js"></script>
<!-- import common -->
<script src="./js/common.js"></script>
<!-- import template -->
<script src="./js/template.js"></script>
<!-- import listclassNew.js -->
<script src="./js/listclassNew.js"></script>
</body>
</html>
6.2 less的内容
// main
// 媒体查询
@media screen and (device-width: 320px) {
html {
font-size: (320px/15);
}
}
@media screen and (device-width: 375px) {
html {
font-size: (375px/15);
}
}
@media screen and (device-width: 414px) {
html {
font-size: (414px/15);
}
}
@media screen and (device-width: 500px) {
html {
font-size: (500px/15);
}
}
// 去除引入iframe的默认样式
iframe {
display: block;
border: 0;
}
body {
background-color: #ebebeb;
// main最外层div
.brief {
padding:5px;
width: 375rem/25;
background-color: #ebebeb;
// 外层ul
.briefin {
width: 365rem/25;
font-size: 14rem/25;
color: #666;
overflow: hidden;
}
// 外层li里面的a
.fl a {
height: 40rem/25;
line-height: 40rem/25;
color: #000;
font-size: 16rem/25;
font-weight: bold;
display: block;
padding-left: 16rem/25;
border-bottom: 1px solid #ccc;
position: relative;
}
// 外层li里面的a的span
.fl .bgi,.fl .bgi2 {
position: absolute;
right: 0;
top: 20rem/25;
display: block;
width: 30rem/25;
height: 7rem/25;
}
// 向下箭头
.fl .bgi {
background: url("../img/arrow1.gif") right center no-repeat;
}
// 向上箭头
.fl .bgi2 {
background: url("../img/arrow2.gif") right center no-repeat;
}
// li里层的ul
.fl ul {
width: 100%;
margin-left: -1px;
background: #f9f9f9;
border-bottom:2px solid #888;
border-top:2px solid #888;
margin-top:-1px;
overflow: hidden;
// display: none;
}
// 隐藏li里层的ul属性
.fl .none {
display: none !important;
}
// 显示li里层的ul属性
.fl .none {
display: show !important;
}
// li里层的ul的li
.fl ul li {
float: left;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
text-align: center;
width: 33.33%;
height: 1.6rem;
line-height: 1.6rem;
}
// li里层的ul的li的a标签
.fl ul li a {
display: block;
width: 100%;
color:#333;
font-size: 14rem/25;
}
}
}
6.3 js的内容
/*
* @Author: Robyn
* @Date: 2017-11-06 12:44:46
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-06 16:53:41
*/
// main外层li的ajax请求渲染
$.ajax({
// 数据请求
url: "http://157.122.54.189:9090/api/getcategorytitle",
// 类型是get
type: "get",
// 请求数据成功后的回调函数
success: function (data) {
// 获取数据内容
var html = template("listclass", data);
// 渲染到前端
$("#lis_list").html(html)
}
});
// 通过事件委托注册li的点击事件，目的是为了获取当前li的data-id值
$("#lis_list").on("click", "li", function () {
// 获取外层所有li
var lis = $(".fl");
// 获取第一次ajax请求的放在外层li的data-id值
var dataid = $(this).data("id");
// 存储当前的this值
var _this = this;
$.ajax({
// 数据请求
url: "http://157.122.54.189:9090/api/getcategory",
// 类型是get
type: "get",
// 因为api文档要求需要有titleid值，所以用data对象的形式传递到后端
data: { "titleid": dataid },
// 数据成功获取后的函数
success: function (innerdata) {
// 获取后台数据
var html1 = template("innerListClass", innerdata);
// 找到里层li的ul
$(_this).find("ul").html(html1);
// 当前的li的span标签toggle切换
$(_this).find('span').toggleClass("bgi2 bgi");
// 其他li的span标签移除掉bgi2，增加bgi类名
$(_this).siblings().find('span').removeClass("bgi2").addClass("bgi");
// 隐藏掉其他ul
$(_this).siblings().find('ul').removeClass("show");
// 显示当前ul
$(_this).find('ul').toggleClass("show none");
}
});
});
6.4 通过谷歌postman获取得到的后台api数据
