使用art-template渲染json数据

art-template特性

  1. 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
  2. 支持运行时调试,可精确定位异常模板所在语句(演示)
  3. 对 NodeJS Express 友好支持
  4. 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
  5. 支持include语句
  6. 可在浏览器端实现按路径加载模板(详情)
  7. 支持预编译,可将模板转换成为非常精简的 js 文件
  8. 模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
  9. 支持所有流行的浏览器
    案例使用原生语法

art-template.js下载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报-hao360接口</title>
    <link rel="stylesheet" href="css/weather.css">
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 
        使用前段模板框架,生成html
        art-template
        1.引入art-template的包
        2.根据art-template的语法,编写模板
        3.使用模板
     -->
    <script src="js/template-native-debug.js"></script>
    <!-- 
    创建模板
    1.模板必须定义到一对<script>标签内
 -->
    <script id="wtTemplate" type="text/html">
     <li>         
         <h2><%= date %></h2>         
         <div class="day">
             <h3>白天天气</h3>
             <% for(var i=1;i<info.day.length;i++){
      %>
                 <p><%= info.day[i] %></p>              
                 <% } %>
         </div>
         <div class="night">
             <h3>晚上天气</h3>
             <% for(var i=1;i<info.night.length;i++){
      %>
                    <p><%= info.night[i] %></p>              
                    <% } %>
         </div>
     </li>
 </script>
    <script type="text/javascript">
        //声明回调函数
        function callback(data) {
     
            //1.拆解data数据            
            $('#wtInfo').html('');//清空已有的天气数据
            var wt = data.weather;
            //2.循环生成5个li标签,并且把数据渲染到li标签里
            $.each(wt, function (i, e) {
     
                var tag = template('wtTemplate', e);
                //3.把生成的li标签插入到ul里
                $('#wtInfo').append(tag);
            });

        }
        $(function () {
     
            //注册按钮btn点击事件
            $('#btn').on('click', function () {
     
                //1.获取选中的城市ID
                var cityCode = $('#selCity option:selected').val();
                //2.拼接出请求URL
                var url = 'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=' + cityCode;
                //3.动态的在页面合适位置创建一个
                    
                    

你可能感兴趣的:(AJAX,前端,JavaScript)