以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響應

回答

相關問題