通过ajax在页面遍历json对象数组及删除

这次使用 js模板引擎: art-template，大大简化苦逼后端程序员的前端工作内容

只需要在项目 js包中放入 template-web.js 即可使用

链接：https://pan.baidu.com/s/11XXjuIN1MxSYbjOYmv3gKg 提取码：sw3i

后台返回的 json数据格式如左图

一. 首先，在页面加入

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

二. 显示页面

将需要循环的内容用 <script type="text/template" id="temp1"> 包裹,注意，必须设置一个 id ，在后续js方法中会使用。

其上一层，例如 <tbody id="change"> 也需设置 id

json数据中，需要遍历的对象数组，在下方 each 中名为 datalist ，后续 js 方法中会取出 json中的 data 数组命名为datalist

其中， {{$index}} 为自动生成的索引，value为数组中的对象

<table> 
 
    <tbody id="change">
        <script type="text/template" id="temp1">

            {{each datalist}}

                <tr id='{{$index}}'>
                    <td>{{$value.rid}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.workplace}}</td>
                    <td>{{$value.job}}</td>
                    
                    <button  onclick="deleteItem('{{$value.rid}}','{{$index}}')"></button>
                 </tr>

             {{/each}}
 
         </script>
     </tbody>
 
</table>

三. 开始写 ajax 获取后台返回的 json数据，并显示到上方的页面中

2.其中，从返回的 json数据 res 中,取出名为res.data的对象数组，命名为 datalist

3.然后，创建名为 data 的对象，

4.并利用 datalist : datalist , 将 datalist 数组放入其中，命名为 datalist

5.然后， var html = template('temp1', data) ，根据 id 找到标题二中代码里的 <script>,并放入 data

6.最后，document.getElementById('change').innerHTML = html;

通过 id : change 在标题二中代码中找到 <tbody> ,再插入 6 中获取的 html

<script>
    var datalist=[]; //数据给该数组，方便遍历和删除操作

    function querylist() {

        $.ajax({
            type:'GET',
            dataType: "json",
            url:"../people/list",
            // data:{
            //     msg: "给我来个数据", //可设置发送的数据
            //     age: "18",
            //     name: "老爷爷"
            // },

            success:function(res){

                if (res.code == 0) {
                    alert("获取成功");

                    datalist = res.data;
                    var data={
                        datalist:datalist
                    };
                    var html = template('temp1', data);
                    document.getElementById('change').innerHTML = html;

                }else {
                    alert("获取成功")
                }

            },
            error:function(){
                alert("获取失败");
            }
        });
    }
    
</script>

四. 点击删除单行数据，并通过ajax传递给后台.

需要删除标题四代码中的 js 方法外 datalist 数组中的元素，页面就会变化。

1. 如图在该 js方法所获取的 id 和 index，可在标题一中，每条数据后的按钮提供

传入待删除对象的id属性，和该条数据的索引 index ,并将 index 转为 int 型

将 id 传给后台，返回的 json数据，判断当 res.code == 0 时，直接通过索引 ,删除 datalist 数组中的元素。

<script>
    function deleteItem(id,index) {

        var key = parseInt(index);//数组索引

        $.ajax({
            type:'POST',
            dataType: "json",
            url:"../people/delete_item",
            data:{
                id: id
            },
            success:function(res){

                if (res.code == 0) {
                    alert("删除成功");

                    datalist.splice(key, 1);//从索引key开始，删 1 个元素
                    var data={
                        datalist:datalist
                    };
                    var html = template('temp1', data);
                    document.getElementById('change').innerHTML = html;

                }else {
                    alert("删除失败")
                }
            },
            error:function(){
                alert("删除失败");
            }
        });
    }
</script>

至此结束，大概某一天，苦逼的我也会成为前端工程师。。。。