一、在前端写一个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");
}
})
})