以HTML格式放入AJAX响应

我有AJAX响应，需要在PHP文件的HTML设置中呈现。我很困惑关于如何呈现为有在AJAX响应多个数据和他们每个人必须放在特定的地方在HTML以HTML格式放入AJAX响应

例如AJAX响应有两个（或n）对象是这样的：

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

之后，已经有将两个（或N）在HTML与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>

我迷路了，我怎么能做到这一点对AJAX的成功在这里使用jQuery的：

$.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     
     }); 
    } 
});

来源

2016-10-07 s develop

为什么你在响应之前放置2'div'。在当前你编写'console.log（）;'的地方创建'div'并将它追加到父'div' – KinjalMistry

@KinjalMistry我不允许在响应中创建div，我只需要将数据 –

检查Madalin ivascu的回答。如果你不允许让我知道原因。为什么你不被允许？ – KinjalMistry

使用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/

来源

2016-10-07 06:19:34 madalinivascu

先生，无论如何，只能附加数据而不是整个HTML标签？ –

看到我的第二部分的答案 – madalinivascu

第二部分应该放在AJAX Success部分里面'$ .each（data，function（key，value）{HERE}'？ –

能不能请你

$.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) 
      }); 
     }); 
    } 
    });

来源

2016-10-07 06:22:46

这是另一种方式，使用是否方便，

让我们说乌尔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 
    } 
}); 
});

来源

2016-10-07 07:00:32 Samir

以HTML格式放入AJAX响应

回答

相关问题