html
<table border="1">
<tr>
<td></td>
<td>缩略图</td>
<td>名称</td>
<td>价格</td>
</tr>
<tbody id="tableRows"></tbody>
</table>
<script id="gridTemp" type="text/x-dot-template">
{{~it:value:index}}
<tr>
<td><input type="checkbox" value="{{= value.id}}"/></td>
<td><img src="{{= value.img }}" width="200px"/></td>
<td>{{= value.name }}</td>
<td>{{= value.price }}</td>
</tr>
{{~}}
</script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/doT.js"></script>
<script type="text/javascript">
function init(){
$.ajax({
url:'goods/list',
type:'post',
dataType:'json',//服务器端返回的数据格式是json
data: {
},//发给服务器端的数据
success:function(res){ //data:服务器端返回给浏览器端的数据
if(res.code==0){
//编译模板
var interation = doT.template( $('#gridTemp').html() );
//将数据显示到网页中
$( '#tableRows' ).html(interation( res.data ));
}else{
alert(res.msg);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
});
}
window.onload=init;
</script>
数据格式
{"data":[{"id":"29f26dd1fded49ec8843ca99f7a0a818","name":"asdfasdf","descrip":"","price":0,"tags":"","selling1":"","selling2":"","selling3":"","createTime":"Oct 2, 2020 5:34:37 PM","updateTime":"Oct 2, 2020 5:34:37 PM"},{"id":"fba5223daa184df0b84588d65ad3d5e7","img":"/lvyou/upload/1641f00d355847edacf4ac9fb7d8b565.png","name":"测试","descrip":"非打死对方","price":0,"tags":"234123,哈哈","selling1":"1234","selling2":"啊的说法","selling3":"asdfasdf","createTime":"Oct 2, 2020 7:56:40 PM","updateTime":"Oct 2, 2020 7:56:40 PM"},{"id":"86037a66d4514f1f973d0854897227fe","img":"upload/136c3f29cc974c3caa437a1be8f2cfa0.png","name":"2015","descrip":"asdfasdf","price":0,"tags":"安委发","selling1":"安委发","selling2":"","selling3":"","createTime":"Oct 2, 2020 8:15:53 PM","updateTime":"Oct 2, 2020 8:15:53 PM"}],"code":0}
原文出处:/show_1EF6MqKruVRU.html