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

Ajax 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

这次使用 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 数组中的元素,页面就会变化。

    故后台无需返回 具体数据,只返回 code 即可

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

      <button οnclick="deleteItem('{{$value.rid}}','{{$index}}')"></button>

      传入 待删除对象的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>

 

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

 

 

  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值