本身不是很擅长做前台，今天实现了个小功能，记录一下。

需求

网站首页(home.html) 有个模块，展示六张图片，要求每行显示三张。
POJO:

public class Sys_picture extends Model implements Serializable {

    private String id;   // 图片序号
    private String picurl;  // 图片url
}

html代码：

<div>
        <table id="pics">
        </table>
</div>

现状

跳转到首页的代码返回的是首页另一模块所需要的数据，所以无法在后台查询后传入首页。

解决方案

解决：使用ajax

$(document).ready(function () {
        $.ajax({
            url : "${base}/platform/cms/picture/data", // ajax异步请求
            type : "get",
            success : function (result) {
                var data = result.data // 得到后台数据
                var line = ''
                for (var i = 0; i < data.length; i ++){ // 针对每个数据编写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