2013-06-27 189 views
0

我無法通過使用jQuery和AJAX顯示從下面的JSON圖像(附件=>圖像=>滿=> URL):圖像不顯示

{ 
"status": "ok", 
"post": { 
    "id": 117, 
"url": "https:\/\/domain.com\/classifieds\/%d0%bf%d1%80%d0%be%d0%b4%d0%b0%d0%bc-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%be%d0%b1%d0%b8%d0%bb%d1%8c\/", 
"title": "\u041f\u0440\u043e\u0434\u0430\u043c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c", 
"content": "<p>\u0426\u0432\u0435\u0442 \u043a\u0443\u0437\u043e\u0432\u0430: ", 
"date": "2013-06-26 10:30:06", 
"modified": "2013-06-26 10:33:06", 
"tags": [], 
"attachments": [ 
    { 
    "images": { 
     "full": { 
     "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg", 
     "width": 650, 
     "height": 433 
     }, 
     "large": { 
     "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg", 
     "width": 650, 
     "height": 433 
     }, 
     "small": { 
     "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-120x79.jpg", 
     "width": 120, 
     "height": 79 
     }, 
     "custom-size": { 
     "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-650x200.jpg", 
     "width": 650, 
     "height": 200 
     } 
    } 
    } 
] 
} 
} 

我jQuery是:

$.ajax({ 
    url: url_to_json, 
    async: false, 
    crossDomain: true, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'jsonp', 
    timeout: 5000, 
    success: function (data, status) { 
    if (data !== undefined && data.post !== undefined) { 
     $('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[images].full.url + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>'); 
    } 
    }, 
    error: function() { 
    output.html('<h1 class="error">There was an error loading the data.</h2>'); 
    } 
}); 

請幫助我是JQUERY的新手。我非常感謝你的幫助。

+0

可以看出U內JSON數據檢索正確的URL '背景圖片:' CSS屬性? – dreamweiver

回答

3

試一下:

data.post.attachments[0]['images'].full.url 

或者說:

data.post.attachments[0].images.full.url 
+0

謝謝烤有錯誤:未捕獲TypeError:無法讀取屬性'0'的undefined – qqruza

+0

這裏工作:http://jsfiddle.net/3XUBF/ –

1

這裏有

  1. 屬性訪問是錯誤的兩個問題,它應該是data.post.attachments[0].images.full.url
  2. 網址是javascript逃脫,你需要忽略它.replace(/\\\//, '/')

所以它應該是

$('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[0].images.full.url.replace(/\\\//, '/') + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>'); 
+0

我不認爲你需要unescape它:http:// jsfiddle.net/3XUBF/ –