標籤：載入失敗 type append doctype 城市 jquery 拼接 success min
<!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函數擷取資料，並且渲染
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
