zoukankan      html  css  js  c++  java
  • 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;
    	     }
          } 
    
  • 相关阅读:
    基本类型数组与包装类型数组相互转换
    (转载)JVM中的内存模型与垃圾回收
    Python之threading多线程
    Python之基于socket和select模块实现IO多路复用
    Python之利用socketserver实现并发
    Python的网络编程socket模块
    Python设计模式之一(单例模式)
    Python异常处理
    Python面向对象之常用的特殊方法(5)
    Python面向对象之私有方法(4)
  • 原文地址:https://www.cnblogs.com/1ddd/p/12929814.html
Copyright © 2011-2022 走看看