如何使用jQuery从php文件中的json_encode数据中获取数据?

时间:2014-03-16 16:24:36

标签: javascript php jquery json get

我是编码的新手。我试图在客户端显示数据库中的所有图片。我可以在我的php文件上做到这一点,但我无法用jQuery获取json_encode数据。 有人能帮帮我吗?提前谢谢!

这是我的PHP代码:

foreach ($pictures as $picture){
      $photos = "<p><img src='".$picture['link']."' width='200' height='200'></p><p id='title'>".$picture['title']."</p><p id='descr'>".$picture['descr']."</p>";
      echo json_encode($photos);
}

这是我的JavaScript:

$.ajax({                                      
        type: 'GET',
        url: 'server/picture_client.php',        
        dataType: 'json',                  
        success: function(photos){     
        if(photos){
            var data = $.parseJSON(photos);
            $("#grid").append(data);

        }else{
            alert("oops nothing happened :(");
        }        
    }

再次感谢你!

3 个答案:

答案 0 :(得分:0)

由于您已提供dataType: 'json',因此您无需再次$.parseJSON数据,您可以使用:

$("#grid").append(photos);

答案 1 :(得分:0)

在这种情况下你真的不需要json你可以发送html:

foreach ($pictures as $picture){
      $photos .= "<p><img src='".$picture['link']."' width='200' height='200'></p><p id='title'>".$picture['title']."</p><p id='descr'>".$picture['descr']."</p>";
}
echo $photos;

然后将html附加到您的元素:

$.ajax({                 
    type: 'GET',
    url: 'server/picture_client.php',        
    dataType: 'html',                  
    success: function(photos){     
    if(photos){
        $("#grid").append(photos);

    }else{
        alert("oops nothing happened :(");
    }        
}

答案 2 :(得分:0)

试试这个,

 foreach ($pictures as $picture){
  $photos[] = "<p><img src='".$picture['link']."' width='200' height='200'></p><p id='title'>".$picture['title']."</p><p id='descr'>".$picture['descr']."</p>";      
 }
echo json_encode('photos' => $photos);

jquery的:

$.ajax({                                      
    type: 'GET',
    url: 'server/picture_client.php',        
    dataType: 'json',
    success: function(results){  
       $.each(results.photos, function(i, item) {
         $("#grid").append(item);
       });​ 
    }
});