ajax 不改变页面结构利用模板引擎渲染页面

首先:引入模板:连接为:链接：https://pan.baidu.com/s/1B1Cn-GU6WVrxl14VMwK2XA 密码：xr3i

  <script src="./template-web/template-web.js"></script>

第一步:调接口查询数据

  $.ajax({
        url: '接口地址',
        // data:,
        type: 'get',

        success: function (backData) {

            第三步:将查询的数据和模板连接

          var result = template('cateTem', backData);//这个参数(定义模板的id,接口返回的数据)
          // 直接替换,不用删除页面中的数据
          $('tbody').html(result);
        }
      })

第二步:编写定义模板,填数据

 <script type="text/html" id="cateTem">
    {{each items}}
      <tr cateId="{{$value[0]}}">
          <td class="text-center"><input type="checkbox"></td>
          <td>{{$value[2]}}</td>
          <td>{{$value[1]}}</td>
          <td class="text-center">
            <a href="javascript:;" class="btn btn-info btn-xs">编辑</a>
            <a href="#" class="btn btn-danger btn-xs">删除</a>
          </td>
      </tr>
    {{/each}}
  </script>