如何按视图页面CSS渲染Ajax请求返回的数据？

通过下拉选项切换视图，已用Ajax从RestController获取到数据，但不知道如何在视图页面按照现有CSS结构渲染数据。选择“All”时是通过Controller传数据用JSTL渲染并应用了CSS，希望Ajax返回的数据也用同样结构展示。

核心思路是在Ajax的success回调中，遍历返回数据，手动拼接与JSTL渲染完全一致的HTML结构，替换原有内容容器即可。

1. 给内容容器添加ID #

先给承载列表的容器加上ID，方便后续定位替换：

<div class="row g-4" id="partnerPlaceContainer">
    <!-- 原JSTL渲染的列表内容 -->
</div>

2. 修改Ajax的success回调逻辑 #

在回调中处理数据格式（和后端保持一致），拼接HTML并替换容器内容：

success : function(data){
    $('#partnerPlaceContainer').empty();
    let html = '';
    data.forEach(function(item) {
        // 处理地址：和后端逻辑一致，截取格式化
        const addressArr = item.partner_place_address.split(" ");
        const address = addressArr[0].substring(0, 2) + " " + addressArr[1];
        
        // 处理价格：格式化为韩元货币格式
        const price = new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(item.partner_place_price);
        
        // 拼接与JSTL结构完全相同的HTML
        html += `
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.1s" onclick="location.href='/rental/partnerPlaces/${item.partner_place_no}';" style="cursor: pointer;">
            <div class="service-item rounded overflow-hidden" style="height: auto;">
                <img src="${pageContext.request.contextPath}/resources/upload/partner_place/${item.partner_place_image}" class="w-100 py-auto" style="height: 225px;">
                <div class="position-relative p-4 pt-0">
                    <h4 class="mb-3 py-2">${item.partner_place_name}</h4>
                    <div>
                        <span>${address}</span>
                        <div style="float: right;">${price} <small>/hour</small></div>
                    </div>
                </div>
            </div>
        </div>
        `;
    });
    $('#partnerPlaceContainer').html(html);
    // 重新初始化wow动画，让新元素也有动画效果
    new WOW().init();
},

3. 处理“All”选项的切换 #

当下拉选择空值（All）时，直接复用页面加载时的全量数据，避免重复请求：

// 页面加载时把全量数据转成JSON存到全局变量
let allPartnerPlaces = ${partnerPlaceList};

// 修改下拉切换事件
$('#guSelect').change(function(){
    var partner_place_address = $(this).val();
    if (!partner_place_address) {
        // 选择All，渲染全量数据
        renderPartnerPlaces(allPartnerPlaces);
        return;
    }
    // 原有Ajax请求逻辑
});

// 封装渲染函数，复用代码
function renderPartnerPlaces(data) {
    $('#partnerPlaceContainer').empty();
    let html = '';
    data.forEach(function(item) {
        const addressArr = item.partner_place_address.split(" ");
        const address = addressArr[0].substring(0, 2) + " " + addressArr[1];
        const price = new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(item.partner_place_price);
        html += `
        <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.1s" onclick="location.href='/rental/partnerPlaces/${item.partner_place_no}';" style="cursor: pointer;">
            <div class="service-item rounded overflow-hidden" style="height: auto;">
                <img src="${pageContext.request.contextPath}/resources/upload/partner_place/${item.partner_place_image}" class="w-100 py-auto" style="height: 225px;">
                <div class="position-relative p-4 pt-0">
                    <h4 class="mb-3 py-2">${item.partner_place_name}</h4>
                    <div>
                        <span>${address}</span>
                        <div style="float: right;">${price} <small>/hour</small></div>
                    </div>
                </div>
            </div>
        </div>
        `;
    });
    $('#partnerPlaceContainer').html(html);
    new WOW().init();
}

关键注意点 #

• 地址和价格的格式化逻辑必须和后端保持一致，保证显示效果统一。
• 若使用了wow.js动画，替换内容后需要重新初始化，否则新元素不会触发动画。
• 复用页面初始的全量数据，减少不必要的Ajax请求，提升切换体验。

内容的提问来源于stack exchange，提问作者heo