模拟ajax中success函数获取数据，并且渲染
发布时间：2020-12-16 03:02:38 所属栏目：百科 来源：网络整理
导读：!doctype htmlhtml lang="en"head meta charset="UTF-8" titlejQuery渲染数据练习/title/headbody ul class="itemBox" id="itemBox" !-- 初始模版 -- !-- li class="item" h3姓名：/h3 h4性别/h4 h4城市：/h4 h4年龄：/h4 /li -- /ul script type="text/java
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery渲染数据练习</title></head><body> <ul class="itemBox" id="itemBox"> <!-- 初始模版 --> <!-- <li class="item"> <h3>姓名：</h3> <h4>性别</h4> <h4>城市：</h4> <h4>年龄：</h4> </li> --> </ul> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> // 这是模拟的数据 var data = [ {name: ‘小明‘,age: 12,sex: ‘男‘,city: ‘西安‘},{name: ‘小王‘,age: 34,sex: ‘女‘,city: ‘榆林‘},{name: ‘小张‘,age: 45,city: ‘宝鸡‘},{name: ‘小李‘,age: 17,city: ‘咸阳‘},{name: ‘小赵‘,age: 11,city: ‘山西‘},{name: ‘小孙‘,age: 2,city: ‘湖南‘},]; // 这是模拟的处理数据的函数 function success(data) { // 对数据进行判断，若数据存在 if(data) { // 遍历数据 data.forEach(function (v) { // 这里可以换为箭头函数，注意兼容性 console.log(v) // 创建元素的模版并拼接数据 // es5的写法，帮你注释了 // var str = ‘<li class="item"><h3>姓名：‘+ v.name +‘</h3><h4>性别：‘+ v.sex +‘</h4><h4>城市：‘+ v.city +‘</h4><h4>年龄：‘ + v.age + ‘</h4></li>‘; // es6的写法 var str = `<li class="item"> <h3>姓名：${v.name}</h3> <h4>性别：${v.sex}</h4> <h4>城市：${v.city}</h4> <h4>年龄：${v.age}</h4> </li>`; // 创建元素 var oLi = $(str); // // 可以在这绑定事件，添加样式等操作，也可以事件委托交给父元素（推荐） oLi.on(‘click‘,() => { alert(‘你点击了元素‘); }); // 添加到页面 $(‘#itemBox‘).append(oLi) //或者这样一次到位，不用创建中间变量 // $(‘#itemBox‘).append(`<h3>${v.name}</h3>`); }); } else { alert(‘数据加载失败‘); } } // 模拟调用过程 success(data); </script></body></html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |