JS之Ajax请求数据后渲染数据
Ajax请求完接口之后拿到数据再使用JS,在内进行拼接渲染结构,代码总觉得不太够优雅,于是想到了字面量方式
优雅的渲染结构方式
先创建一个模板(这里的script type="text/template" 是不会渲染结构也不会报JS错误),将需要渲染替换的字段使用{{}}进行包裹,例:{{Title}}
<script type="text/template" id="teamEvaluate">
<li class="clearfix">
<div class="doctor-images">
<img src="{{Headimg}}" />
<p>{{Title}}</p>
</div>
<div class="doctor-evaluate clearfix oh">
<div class="evaluate-top">
<h4 class="disease-name">疾病名称:{{Disease}}</h4>
<div class="service-tag">
<span>服务态度:<strong>10.0</strong> </span>
<span>治疗效果:<strong>10.0</strong></span>
<div class="star-score"></div>
</div>
</div>
<div class="evaluate-desc">
<p>{{Content}}</p>
<p class="evaluate-date"><span>{{AddTime}}</span><span>点评类型:医院就诊</span></p>
</div>
<div class="replay-con">
[医生回复]:{{ReplyMsg}}
</div>
</div>
</li>
</script>
敲黑板,重点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;
}
}