根据返回json动态拼接页面（注意点+转意字符）_前端根据接口返回数据json来动态生成页面-优快云博客

本文介绍了如何根据返回的JSON数据动态拼接HTML页面，并强调了在传参过程中字符串转义的重要性。通过示例代码展示了如何使用JavaScript实现页面动态加载，包括评论的显示、删除、点赞和举报功能，同时展示了如何处理包含特殊字符的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据返回json动态拼接页面

根据拼接页面进行操作动态传参的时候应注意的

当传参中有字符串的时候就需要进行转义处理：

//获取最新评论
window.onload = function () {
    postList();

}

function postList() {
    var html = "";
    var articleID = '${contentId}';
    $.post('m/newPostList', {
        articleID: articleID,
    }, function (data) {
        var data1 = data.list;
        $.each(data1, function (i, dataList) {
            if (i < 3) {

                html += '<div class="pure-g" id="del' + dataList.id + '">';
                html += ' <div class="pure-u-1-8">';
                html += '<a class="w-dis-user" href="javascritp:;">';
                html += ' <img src="${FILE_URL}' + dataList.headPath + '" >';
                html += '</a>';
                html += ' </div>';
                //  <%--最新评论--%>
                html += '  <div class="w-dis-detail pure-u-7-8">';
                html += '  <p class="w-dis-detail1">';
                html += '  <span class="left" id="nickName">' + dataList.nickName + '</span>';
                <%--删除控制--%>
                if (dataList.uCenterUId == '${userInfo.id}') {
                    html += ' <span class="l-dele" onclick="delConfirm( ' + dataList.id + ')">删除</span>';
                }
                <%--点赞控制--%>
                html += '   <span class="right  iLike" id="likeComment' + dataList.id + '" onclick="likeComment(' + dataList.topicID + ',' + dataList.id + ',' + dataList.siteID + ',' + dataList.uCenterUId + ')">' + dataList.iLike + '</span>';
                html += '  </p>';
                <%-- content--%>
                html += ' <p class="w-dis-detail2" id="newContent">' + dataList.content + '</p>';
                html += ' <p class="w-dis-detail3">';
                html += '  <span id="createTime">' + dataList.createTime + '</span>';
                html += '  <b>·</b>';
                html += '<a class="w-footer-tip right" onclick="reportP(\'' + dataList.articleID + '\',\'' + dataList.id + '\',\'' + dataList.uCenterUId + '\',\'' + dataList.siteID + '\');"  id="report' + dataList.id + '">举报</a>';
                html += '    </p>';
                html += '  </div>';
                html += '   </div>';
            }
            ;
        })
        $("#newestPost").html(html);
    })
}