前端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文件模拟数据与后台交互相关推荐

Nginx映射本地json文件，配置解决浏览器跨域问题，提供前端get请求模拟数据
场景网络接口返回json格式数据,可以直接在浏览器中访问. 可以在页面上右键另存为json格式文件怎样在本地使用nginx配置,模拟get接口返回该json文件,使前端使用ajax请求数据时,可以 ...
springboot~openfeign从JSON文件读取数据
对openfeign不清楚的同学可以先看我这篇文章:springboot~openfeign从此和httpClient说再见对于openfeign来说,帮助我们解决了服务端调用服务端的问题,你不需要 ...
前端用Mockjs模拟数据
mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...
SpringMVC(SSM)框架搭建JavaWeb项目时，前端页面文件上传，后台Java下载功能实现及相关问题记录说明
看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...
python 读取json为list及向json文件追加数据
""" 读取json数据到list """ def read_json_list(json_file):if not (os.path.ex ...
kotlin 读取json文件_Kotlin数据类及json解析
通过数据类,可以方便地得到很多有趣的函数,一部分是来自属性,比如编写getter和setter函数,还有下面这些函数:equals(): 比较两个对象的属性来确保他们是相同的. hashCode(): ...
使用PHP通过AJAX获取到JSON文件的数据,点击按钮后添加url 跳转到指定页面
html前端页面.通过AJAX异步获取内容 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
JSON 文件的数据抽取
1.打开kettle文件,创建转换. 打开Kettle创建转换json_extract,并且添加JSON input控件,"表输出"控件以及HOP连接线. 2.配置JSON inp ...
java读取json文件把数据存入数据库中
//读取json文件public static String readJsonFile(String fileName) {String jsonStr = "";try {Fil ...
vue2.0+ axios如何读取本地json文件的数据
1.用vue-cli搭建起一个hello-world(名字随意)的工程,不做任何修改. 2.引入Axios. 在入口文件main.ts中引入Axios import Axios from 'axios ...

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

前端json文件模拟数据与后台交互相关推荐

最新文章

热门文章