使用 jQuery ajax 调用 PHP 和 json return，并尝试从 json 对象构建列表

Question

我使用以下代码调用 PHP 以恢复 json，并尝试解析返回的 json 对象并列出超链接。我从 PHP 返回了 json 对象，但我的列表是空的。请帮忙！这是我的jQuery代码和json返回

html code
<div id="document_list"></div>

function GetDocListMain() {
   var html='';
   $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
       function(data){
       alert(data);
       $.each(data, function(index, item){
         html +='<li><a href="download_doc.php?id=' + item.id +'">' + item.file_name + ' | ' + item.created + '</a></li>' ;
       });
   });
   $('#document_list').empty();
   $('#document_list').append(html);
} 

我从 PHP 返回的 json 是

[ {"id":"1", "file_name":"testfile1.pdf", "created":"2017-02-11"},
  {"id":"2", "file_name":"testfile2.pdf", "created":"2016-11-12"},
  {"id":"3", "file_name":"testfile6.pdf", "created":"2016-10-12"}
]

Answer 1

$.getJSON是异步的，这就是为什么它不起作用的原因，因为在获取 JSON 数据之前附加了空 html。 将您的 HTML 附加到$.getJSON的成功回调中

  function GetDocListMain() {
       var html='';
       $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
           function(data){
           $.each(data, function(index, item){
             html +='<li><a href="download_doc.php?id=' + item.id +'">' + item.file_name + ' | ' + item.created + '</a></li>' ;
           });
           $('#document_list').empty();
           $('#document_list').append(html);
       });

    }

Answer 2

你不必使用 $.each 和哦！你必须在 AJAX 调用中附加你的 HTML

function GetDocsListMain(){
   var html='';
   $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
       function(data){
          alert(data);
          for(var i = 0; i < data.length; i++){
          html +='<li><a href="download_doc.php?id=' + data[i].id +'">' + data[i].file_name + ' | ' + data[i].created + '</a></li>' ;
       }
       $('#document_list').empty();
       $('#document_list').append(html);
   }
}