js怎么获取后台传到html页⾯的数据，从后台获取数据通过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:
{{each result as value i}}
{{/each}}
5. ajax的写法
// main外层li的ajax请求渲染
$.ajax({
// 数据请求
url: "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}}
{{/each}}
{{each result as value i}}
{{/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: "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值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。