私はいくつかのデータを取得するためとPHPの要求に応じて、PHPに要求を送信ページを持って、AJAXリクエスト

Question

にPHPの応答に基づいて動的にHTMLテーブルを作ることは、このように私に何かを返します -

[{"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"}] 

私が欲しいもの

は、レコードが、私は複数のレコードのために各ループのために使用1.Should以上になります場合、私は何をします

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

特定のdiv内のダイナミックHTMLテーブルを作ることです。

私はこのことに本当に混乱しています。どういうわけか私は解決策を知っていますが、実装できません。

私の質問を理解していただければ幸いです。

Answer 1

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

Answer 2

あなたは、簡単な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> 

を超える1つの結果、私は確かにループを使用するがある場合は、私のJSFiddle