2016-12-13 18 views
3

的基礎上我有一個請求發送到一個PHP的得到一些數據,並響應於PHP的這一請求頁面返回我是這樣的: -製作動態HTML表格上的PHP響應Ajax請求

[{"postID":"1","0":"1","userID":"3","1":"3","imagePath":"images\/31481440272.jpg","2":"images\/3-1481440272.jpg","postDate":"11 December 2016","3":"11 December 2016","postDescription":"trying","4":":D trying"}] 

我要的是做一個動態HTML表中特定的div

<div id="dataWillBeShownHere"></div> 

我該怎麼辦,如果裏面記錄會比1.Should我用每個循環的多個紀錄。

我真的很困惑這件事。不知何故,我知道解決方案,但無法實現。

我希望你能理解我的問題。

+0

如果有超過1分的結果,那麼我肯定會使用一個循環。 for-each循環聽起來像一個用於JSON對象數組的罰款。 – bassxzero

+0

我應該怎麼做,以生成一個特定的div內使用jQuery或JavaScript –

+0

與您的意思是每個循環的PHP表? –

回答

0
var val =0; 
    //alert("entered"); 
     $.ajax({ 
      url:"showPosts.php", 
      type:"post", 
      data:val, 
      success : function(response){ 
       var data=JSON.parse(response); 
       //alert(data.toSource()); 
       $(data).each(function(index, element){ 
        $('#dataWillBeShownHere').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td> <td> '+element[2]+' </td> <td> '+element[3]+' </td></tr>');  
       }) 
       $("#result").html(response); 
      },error : function(jqXHR, textStatus, errorThrown){ 
       $("#result").html(errorThrown + textStatus); 
      } 
     }); 
1

您可以通過簡單的JavaScript和HTML做到這一點:

<script type="text/javascript"> 
var records = []; 
// This data could be retrieved from an ajax $.post 
var data = {"postID":"1","0":"1","userID":"3","1":"3","imagePath":"images\/31481440272.jpg","2":"images\/3-1481440272.jpg","postDate":"11 December 2016","3":"11 December 2016","postDescription":"trying","4":":D trying"}; 

// Add our data to the records array 
records.push(data); 

// Get how many record we have 
var record_count = records.length; 

// Parse data to html tables 
for (var i = records.length - 1; i >= 0; i--) { 
    var html = ""; 

    // make your html additions here 
    html += "<div> ID: " + records[i]["postID"] + "</div>"; 
    html += "<div> Date: " + records[i]["postDate"] + "</div>"; 
    // html += ; 
    // html += ; 

    // Now use jquery selector to write to the div 
    $('#data-table').html(html); 
}; 
</script> 


<div id="data-table"></div> 

檢查我JSFiddle

+1

這很好,但我想我得到了簡單的解決方案。 –

+0

我同意。我認爲你可以將它們結合在一起,解決方案將完成與ajax調用處理寫入html和使用jQuery的foreach,我通常使用自己。只有我提供for循環的原因是因爲我覺得這樣做會使OP得到好處。 – lgroschen