2016-06-24 5 views
1

私は外部のphpファイルのこの形式のJSONを作成:JSONデータはアヤックスを使用してのdivセクションに表示することができないとjQuery

​​

私は、特定のdivセクションにデータを表示するために、これを使用していますが、私は持っています何の結果:?

<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>") 

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

誰もがこのコードに何か問題に気づくことができませんJSONのフォーマットが適切でしょうか?

+1

あなたは 'dataTypeと定義されている場合: 'JSON'' 'jQuery.parseJSON(データ)の後、不要と;' – Vinie

+0

チェックこのアウトhttp://stackoverflow.com/questions/38011548/json-data-can-be-in-div-section-using-ajax-and-jquery#answer-38011695 –

答えて

1

dataは既にjQueryによって変換されたオブジェクトです。解析する必要はありません。

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

あなたは

if (obj.success) { 

をチェックする必要が `tを、あなたはので、次の行を必要としないので、あなたは、あなたのJSONファイルでsuccessを持っていませんデータは既にjsonです

var obj = jQuery.parseJSON(data); 

JSコード

$(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>") 

      }); 
     } 
    }); 
});