js局部刷新html_js 更新div内的html-优快云博客

本文链接：https://blog.youkuaiyun.com/liulanzaijia/article/details/89950303

博客介绍了根据请求服务器的不同数据更新特定div数据的方法。采用ajax请求数据，通过refreshlist刷新方法，以拼接html的方式，利用jQuery的html()方法，将结果更新到指定id为zp_list的div中。

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

需要根据请求服务器的不同数据来更新：

该div中的数据。

1.ajax请求数据：

$.ajax({
    url:"/index/index/getautumn/",
    type: 'POST',
    data: {officeid: officeid, addressid: addressid},
    dataType: "json",
    success: function(res){
        refreshlist(res.list);
    },
    error: function() {
        alert("网络异常，请重试。");
    }


});

主要是refreshlist刷新方法：

function refreshlist(list) {
    var result = '';
    for (var i = 0; i < list.length; i++) {
        var obj = list[i];
        result += '<div class="new_zp_box"><div class="new_zp_title"><span class="new_boxsize">'
        result += obj['office_name'] + '</span></div>';
        result += '<div class="zp_cont boxsize">';
        for (var j = 0; j < obj['list'].length; j++) {
            var item = obj['list'][j];
            result += '<h1 class="p_zp_title">' + item['job_name'] + '<p class="p_zp_number">';
            result += ' / ' + item['people_number'] + '人</p></h1>';
            result += '<h2 class="h_zp_content">岗位职责：</h2>';
            for (var k = 0; k < item['content'].length; k++) {
                result += '<p>'+ item['content'][k] + '</p>'
            }
            result += '<h2 class="h_zp_content">岗位要求：</h2>';
            for (var l = 0; l < item['content_post'].length; l++) {
                result += '<p>'+ item['content_post'][l] + '</p>'
            }
            result += '<p style="height: 30px"></p>';
        }
        result += '</div></div>';
    }
    $("#zp_list").html(result);


}

可以看到我们采用拼接html的方式，然后通过 $("#zp_list").html(result);来更新html，zp_list为div的id。