前端json文件模拟数据与后台交互

一、在前端写一个json文件

data.json放置位置如下

{
  "code":"1",
  "list": [{
    "uid":"88",
    "imgurl": "image/upload/jz57N9RivnPstW11hUva0x0PdkEEZ7NJ5oQ6Ngp63j4CMcTr3jpDFQKC86Em7HMd.jpg"
  },
    {
      "uid":"109",
      "imgurl":"image/upload/9vHPB1rnRvhYSqKSXEQyje4MrJY9SIHvhYc0Q00Dj8KME6NyHkf4hDGq3JJ85r3Y.jpg"
    },
    {
      "uid":"89",
      "imgurl": "image.baidu.com/search/detail3F89n0dlb_z%26e3Bip4s&gsm=0&islist=&querylist="
    }
  ]
}

实际后台传送的数据是不固定的，所以前端页面涉及一个解耦，使信息可以遍历显示

<div class="reg">
    <h1>用户审核页面</h1>
</div>
<div id="task" style="display: none">
    <li class="u-id fl">88</li>
    <li class="u-img fl"><img src="imgs/1.jpg"></li>
    <li class="flag" > <button class="btn">审核通过</button><button class="btn1">未通过</button></li>
</div>
<div class="content">
        <ul class="u-table">
            <li>用户ID</li>
            <li>上传一卡通图片</li>
            <li>操作</li>
        </ul>
            <ul id="task-list">
            </ul>

</div>

js文件中：

 function init(){
        //获取用户Id以及用户对应的图片
        $.get("data.json", function(datas) {
            //如果请求成功，flag状态改变，按钮内容改变
            if(datas.code == 1) {
                var $goods = $("#task-list");
                var taskData = datas.list;
                for (var i = 0; i < taskData.length; i++) {
                    /*需要将数据传给build()*/
                    var item = build(taskData[i]);
                    $goods.append(item);
                }
            }
        });
    }
    function build(datas) {
        /*对data进行处理*/
        var $html = $("#task");
        console.log($html)
       if (datas.length != 0) {
            $html.find(".u-id").text(datas.uid);
            var imgurl="http://timeseller.fantasy512.cn/ddh/"+datas.imgurl
            $html.find(".u-img img").attr("src", imgurl);
       }
         return $html.html();

    }

运行结果：

二、真正后台交互遇到问题

问题1：jquery动态添加的标签（button）无法绑定click事件。使用append增加元素时，该元素的绑定监听事件失效的办法

解决：

 $("#task-list").on("click",".btn1",function (e){})

问题2：一个用户审核通过，其余全部审核通过

解决：用闭包，把事件监听放在for循环里面把 i 传进去，用个闭包

一串列表绑定事件闭包是常用的套路

js代码如下：

function init() {
        //获取用户Id以及用户对应的图片
        $.get("http://timeseller.fantasy512.cn/ddh/check/getAllImage", function (datas) {
          
            if (datas.status == 1) {
                var taskData = datas.data;
                var $goods = $("#task-list");
                for (var i = 0; i < taskData.length; i++) {
                    /*需要将数据传给build()*/
                    var item = build(taskData[i]);
                    $goods.append(item);
            //运用闭包解决问题
                  
                    (function(i){
                        $(".flag:eq("+i+") .btn").click(function () {
                        //如果请求成功，flag状态改变，按钮内容改变
                            $(".flag:eq("+i+")").html("审核通过");
                            $(".flag:eq("+i+") .btn").hide();
                        });
                        $(".flag:eq("+i+") .btn1").click(function () {
                           
                            $(".flag").eq(i).html("审核未通过");
                        });                                                  
                    })(i+1);                
                }
            }

        })
    }

三 post实战

先把要传给后台的数据组装好，然后通过post来传给后台。注意Id的获取，e.target.id

  $("#task-list").on("click", ".btn1", function (e) {
            //如果请求成功，flag状态改变，按钮内容改变
            var id = e.target.id.substring(4, e.target.id.length);

            var data = {
                uid: id,
                flag: 2
            };
            //把用户id传给后台，后台改变flag状态----与用户是否可以发布任务相关
            $.post("http://timeseller.fantasy512.cn/ddh/check/setImageFlag1", data, function (datas) {
                if (datas.status == 1) {
                    $("#flag" + id).html("审核未通过");
                    $("#btn" + id).hide();
                } else {
                    alert("false");
                }
            })
        })

前端json文件模拟数据与后台交互

猜你喜欢