Question

我需要在PHP文件的HTML设置中呈现AJAX响应。关于如何渲染它我很困惑，因为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成功的？

$.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/

Answer 2

你可以试试吗

 $.ajax({
     type: 'GET',
     url: '/url/goes/here',
     dataType: "json",
     success: function(data) {
       $.each(data, function(key, value) {
         $('<div/>', {
           'class': 'user'
         }).append(
           $('<div/>', {
             'class': 'userId'
           }).text(this.id).append(
             $('<div/>', {
               text: 'usernme'
             }).text(this.Name)
           });
       });
     }
   });

Answer 3

这是另一种方式，如果方便的话，使用

让我们说你的HTML，

<div class="append-div"></div>

你的JSON，

{
"Objects":[
    {
        "id": "111",
        "name": "abc"
    },
    {
        "id": "112",
        "name": "xyz"
    }
 ]
}

JS，

$(document).ready(function() {
$.ajax({
    type: 'GET',
    url: 'json.js',
    dataType: "json",
    success: function(data) {
        var userDiv = "";
        $.each(data.Objects, function(key, value){
            console.log(value); //this outputs response as Objects shown above
            userDiv += '<div class="user"><div class="userId">' + value.id + '</div>' + value.name + '</div>';
        });

        $(".append-div").append(userDiv);  // Append the results
    }
});
});

以HTML格式放置AJAX响应

3 个答案: