jQuery從伺服器獲取到資料動態渲染頁面示例

<div class="club-index-club">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>所有的社團</legend>
        </fieldset>
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15" id="index-club-item">
                <div class="layui-col-md6">
                    <div class="layui-panel">
                        <div style="padding: 50px 30px;">一個面板</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 

$(document).ready(function () {
        $.ajax({
            url: "http://localhost:8080/clubIndex",
            type: 'GET',
            contentType: 'application',
            success: function (res) {
                var list = "";
                for (let i = 0; i < res.length; i++) {
                    list += '<div class="layui-col-md6">' +
                        '                    <div class="layui-panel">' +
                        '                        <div style="padding: 50px 30px;">' + res[i].clubName + '</div>' +
                        '                    </div>' +
                        '                </div>';
                }
                $("#index-club-item").append(list);
            }
        })
    })