js ajax渲染数据,JS之Ajax请求数据后渲染数据

Ajax请求完接口之后拿到数据再使用JS，在内进行拼接渲染结构，代码总觉得不太够优雅，于是想到了字面量方式

优雅的渲染结构方式

先创建一个模板(这里的script type="text/template" 是不会渲染结构也不会报JS错误)，将需要渲染替换的字段使用{{}}进行包裹，例：{{Title}}

{{Title}}

疾病名称：{{Disease}}

服务态度：10.0

治疗效果：10.0

{{Content}}

{{AddTime}}点评类型：医院就诊

[医生回复]：{{ReplyMsg}}

敲黑板，重点JS部分来了(这里就不写ajax请求了)

var PageHandle={

//拿到了数据并调用该方法

DrawEvaluate: function (data) {

var htmlstr = "";

//拿到上面script申明的模板

var temphtmlstr = document.querySelector("#teamEvaluate").innerHTML;

//将数据集合逐一进行遍历渲染，Reder

for (var i = 0; i < data.length; i++) {

var obj = data[i];

//每个即将渲染的htmlDOM

var repstr = temphtmlstr;

//将数据对象的key和值拿到，并且替换DOM里面的{{key}}，

for (var key in obj) {

repstr = repstr.replace("{{" + key + "}}", obj[key]);

}

//将单个结果进行添加到总体结果

htmlstr += repstr;

}

//这里return不return都无所谓，再里面或外面也可以进行追加到想放到的地方

//$("").append(htmlstr);

return htmlstr;

}

}