javascript - 将 AJAX 响应放入 HTML 格式

Question

我有 AJAX 响应，需要在 PHP 文件的 HTML 设置中呈现。我对如何呈现它感到困惑，因为 AJAX 响应中有多个数据，每个数据都必须放在 html 中的特定位置

例如 AJAX 响应有两个(或 n 个)这样的对象:

0:Object
     id: "111"
     Name: "abc"
1:Object
     id: "112"
     Name: "xyz"

那么，在 HTML 中已经有两个(或 n 个)带有 user 类的 div

<div class='user'>
    <div class='userId'> 
        <div class='usernm'>  </div>
    </div>
</div>

<div class='user'>
    <div class='userId'> 
        <div class='usernm'> </div>
    </div>
</div>

我需要的是像这样将这些响应值放在这个 div 中:

<div class='user'>
    <div class='userId'> 111
        <div class='usernm'> abc </div>
    </div>
</div>

 <div class='user'>
    <div class='userId'> 112
        <div class='usernm'> xyz</div>
    </div>
</div>

我不知道如何使用 jQuery 在 AJAX Success here 上实现这一点:

$.ajax({
    type: 'GET',
    url: '/url/goes/here',
    dataType: "json",
    success: function(data) {
        $.each(data, function(key, value){
            console.log(value); //this outputs response as Objects shown above                   
        });
    }
});

Answer 1

在循环中使用append 函数将元素添加到页面

$('body').append('<div class="user">
    <div class="userId"> '+value.id+'
        <div class="usernm">'+value.name+'</div>
    </div>
</div>');//note change the body element to your desired parent element

如果你只需要把数据做如下:

success: function(data) {
     $('.userId').each(function(key, value){
                $(value).prepend(data[key].id);   
                $(value).find('.usernm').text(data[key].name);              
            });
}

演示:https://jsfiddle.net/gf32wd7L/1/