一.渲染引擎
作用:当后台改变数据时,能更方便的转换数据,不用传统的那么麻烦
1,导入
2.HTML页面添加模板引擎,将对应的html修改成模板引擎,使之变成渲染数据,即<% %>
---<script type="text/template" id="">
3.通过模板引擎渲染数据,将数据传入HTML页面,
---$('.uu').html(template('模板引擎id',{list:"数据"}));
项目中的搜索模块
一.获取搜索栏中的信息–地址栏中的?后面的数据,与搜索框中的数据相同,相对应
1.先通过location.search;-----?searchNanme=11&age=12;
----获取地址搜索框中输入的数据,searchName || " ";传值或者为空
2.将获取的数据值字符串转换为数组----去掉?,去掉&,去掉=;
3.将转化好的数组值存储在json格式--params={}
4.将其存储的数据传给表单的搜索框,改变value值
5.进行转换编码
二.通过关键字进行搜索,根据关键字将数据渲染到页面
1.通过ajax获取后台数据,传入data数据
---- var getData=function(data,callback){
$.ajax({
url:'user.json',//请求地址
data:'',//发送的数据
type:'',//请求的方式
dataType:'json',//数据的类型
success:function (data) {
callback && callback(data);
},// 请求成功执行的方法
}
2.将关键字和自定义的回调函数传入,回调函数-----进行模板引擎渲染搜索内容
----data中的数据,查看文档,查找接口,
后代数据接口
proName:...,
page:1,
pageSize:4
type:type;------type值的变化,1,2,表示升序和或者降序
当其中的数据中存在变量时,此时并不能直接进行调用,可通过将数据赋值给对象,对对象进行添加属性
----getData(data,进行渲染引擎的函数)-----传入数据的函数
二.调用后台接口
var getData = function (params, callback) {
$.ajax({
url: '/product/queryProduct',---------后台接口
type: 'get',
data: params,----------------传入的数据---可以是后端已整理好的数据
dataType: 'json',
success: function (data) {
window.page = data.page;
//业务逻辑
callback && callback(data);
}
});
}