本身不是很擅長(zhǎng)做前臺(tái)费就，今天實(shí)現(xiàn)了個(gè)小功能诉瓦，記錄一下。
需求
網(wǎng)站首頁(yè)(home.html) 有個(gè)模塊力细，展示六張圖片睬澡，要求每行顯示三張。
POJO:
public class Sys_picture extends Model implements Serializable {
private String id; // 圖片序號(hào)
private String picurl; // 圖片url
}
html代碼：
<div>
<table id="pics">
</table>
</div>
現(xiàn)狀
跳轉(zhuǎn)到首頁(yè)的代碼返回的是首頁(yè)另一模塊所需要的數(shù)據(jù)眠蚂，所以無(wú)法在后臺(tái)查詢后傳入首頁(yè)煞聪。
解決方案
解決：使用ajax
$(document).ready(function () {
$.ajax({
url : "${base}/platform/cms/picture/data", // ajax異步請(qǐng)求
type : "get",
success : function (result) {
var data = result.data // 得到后臺(tái)數(shù)據(jù)
var line = ''
for (var i = 0; i < data.length; i ++){ // 針對(duì)每個(gè)數(shù)據(jù)編寫html
var picurl = data[i].picurl;
var tds = '<td style="padding:10px 10px"><img src="'+ picurl+'" height="300" width="400" ></td>';
if(i % 3 == 0){
line += '<tr>' + tds
}
else if(i % 3 == 2){
line += tds + '</tr>'
}else{
line += tds
}
}
$("#pics").append(line); // 顯示到html
}
});
});
效果
image.png
