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

4. 把之前的死页面的相关从后台获取数据的代码注释掉或者删除，用模板来写，example:

{{each result as value i}}

{{value.title}}

{{/each}}

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内容

产品分类-慢慢买比价网

{{each result as value i}}

{{value.title}}

{{/each}}

{{each result as value i}}

{{value.category}}

{{/each}}

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数据