从后台获取数据通过ajax的形式渲染到浏览器

---

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:

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

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