2016-06-24 4 views
1

ich eine json dieses Formats einer externen PHP-Datei erstellt:Json-Daten können nicht in div Abschnitt angezeigt werden mit Ajax und jQuery

[ 
{ 
    "title": "Welcome!", 
    "description": "The world has changed dramatically..", 
    "image": "img/strawberry-wallpaper.jpg" 
} 
] 

ich dies anhand von Daten anzuzeigen Abschnitt zu einem bestimmten div aber ich habe keine Ergebnisse:

<script type="text/javascript"> 

$(document).ready(function(){ 
$.ajax({ 
url: 'json.php', 
type: 'post', 
data: { get_param: 'value' }, 
contentType:"application/json; charset=utf-8", 
dataType: 'json', 
success: function(data){ 
    var obj = jQuery.parseJSON(data); 
     if(obj.success){ 
      $.each(obj, function (index, item) { 
        if ('success'!= index){ 
      $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"</p><div class='row top-buffer'><div class='col-md-5 col-md-offset-1'><img src='img/link_icon.png' class='img-rounded' width='20px' height='20px'/><a href='www.link.com'>liNK</a></div><div class='col-md-6'><button class='btn btn-primary pull-right' id='btn'>Read More</button></a> </div></div></div>") 

      }); 
      } 
     }; 
    }); 
}); 

jemand etwas falsch an diesem Code feststellen, kann das Format von json ist die richtige?

+1

, wenn Sie definiert 'datatype: 'json'' dann keine Notwendigkeit, von 'jQuery.parseJSON (Daten);' – Vinie

+0

check this out http://stackoverflow.com/questions/38011548/json-data-can-nicht-in-div-Abschnitt anzeigen-using-ajax-and-jquery # answer-38011695 –

Antwort

1

data ist bereits ein Objekt von jQuery konvertiert. Sie müssen nicht analysieren.

DEMO

$(function() { 
    $.ajax({ 
     url: 'json.php', 
     type: 'POST', 
     data: {get_param: 'value'}, 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     success: function(data) { 
      // check with console 
      console.log(data); 

      $.each(data, function(index, item) { 
       $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"</p><div class='row top-buffer'><div class='col-md-5 col-md-offset-1'><img src='img/link_icon.png' class='img-rounded' width='20px' height='20px'/><a href='www.link.com'>liNK</a></div><div class='col-md-6'><button class='btn btn-primary pull-right' id='btn'>Read More</button></a> </div></div></div>"); 
      }); 
     } 
    }); 
}); 
1

LINK TO DEMO

Sie haben noch success in Ihrer JSON-Datei, so dass Sie don `t

if (obj.success) { 

und Sie brauchen nicht die folgende Zeile überprüfen müssen, weil Daten sind bereits JSON

var obj = jQuery.parseJSON(data); 

js Code

$(document).ready(function() { 
    $.ajax({ 
     url: 'json.php', 
     type: 'post', 
     data: {get_param: 'value'}, 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     success: function (data) { 
      $.each(data, function (index, item) { 
       $('#output').append("<div class='col-md-6' ><img class='img-rounded' src=" + item.image + "alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>" + item.title + "</h3><p class='well'>" + item.description + "</p><div class='row top-buffer'><div class='col-md-5 col-md-offset-1'><img src='img/link_icon.png' class='img-rounded' width='20px' height='20px'/><a href='www.link.com'>liNK</a></div><div class='col-md-6'><button class='btn btn-primary pull-right' id='btn'>Read More</button></a> </div></div></div>") 

      }); 
     } 
    }); 
}); 
Verwandte Themen