模擬ajax中success函數獲取數據，並且渲染
阿新 • • 發佈：2018-08-24
性別 func else 姓名 ESS tex city ucc utf-8
<!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, sex: ‘男‘, city: ‘寶雞‘},
{name: ‘小李‘, age: 17, sex: ‘女‘, city: ‘鹹陽‘},
{name: ‘小趙‘, age: 11, sex: ‘女‘, city: ‘山西‘},
{name: ‘小孫‘, age: 2, sex: ‘男‘, 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>
模擬ajax中success函數獲取數據，並且渲染