利用Ajax做页面无刷新时使用Jquery在模板遍历数据

首先，在DIV里面定义 id 或者 class 一般用id，唯一性的。

1.一般情况用户打开页面的时候，模板默认用 foreach 已经遍历了初始数据

<ul id="huawei">
    {foreach name='data_list' id='vo'}
    <li>
        头像：<img src={$vo.image}>
        姓名：<span>{$vo.name}</span>
        年纪：<strong>{$vo.age}</strong>
    <li>
    {/foreach}
</ul

2.如果用户点击侧边栏，切换不同的内容，那么ajax返回的数据就需要用jq进行替换

这里ajax就不写了，直接看接口return的数据。

//ajax请求成功，接受返回的数据，json类型。我这边返回的是二维数组
success: function (ret) {
    //先定义变量，用来存储内容
    var html = '';

   //for循环开始遍历， ret.data.length 表示结束的二维数组的长度，就是有几条数据。
   for (var i = 0; i < ret.data.length; i++){
   //+= 表示循环拼接，
       html += `<li>
       //data[i]  这个 i 是键，比如: $data[0]
       <img src="${ret.data[i].image}" alt="">
                         
                       
       <span>${ret.data[i].name}</span>
       <strong>${ret.data[i].age}</strong>
                            
      </li>`;
    }

   //将遍历的内容，赋值到 id名字叫 pc_item 的元素里面
   $('#pc_item').html(html);


}