使用ajax從API獲取圖像

我沒有在控制檯中發現任何錯誤，但我想要的只是thumbnail_url，它是php文件中的json。在控制檯中顯示它是一個數組字符串，我該如何訪問它？使用ajax從API獲取圖像

EDITS： 我能夠執行我想要的輸出，但問題是最後一個對象是唯一一個在瀏覽器中輸出。

<?php 
//Set API user and password 
$API_USER = 'username'; 
$API_PASS = 'password'; 
//Set parameters to make cURL call to Duda 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); 
curl_setopt($ch, CURLOPT_URL, 'sampleurl'); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
curl_setopt($ch, CURLOPT_USERPWD, $API_USER.':'.$API_PASS); 
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
curl_setopt($ch, CURLOPT_TIMEOUT, 10); 
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); 
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET"); 
//execute cURL call and get template data 
$output = curl_exec($ch); 
//check for errors in cURL 
if(curl_errno($ch)) { 
    die('Curl error: ' . curl_error($ch)); 
} 
//echo $output; 
print_r($output); 
?>

這裏是我們的HTML和Ajax請求：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>Ajax Preview</title> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 

<script> 


    $(function() { 
    var $data = $('#content'); 
    $.ajax({ 
    method:'GET', 
    dataType:'json', 
    url:'https://syncslider-ehnoxx07.c9users.io/temp.json', 
    success: function (data) { 
     $.each(data, function(i,data){ 
      $data.html('<img src=' + data.thumbnail_url + '>'); 
     }); 
    } 
    }); 
});  
    </script> 
</head> 
<body> 
<div id="content"></div> 
</body> 
</html>

來源

2016-09-26 camdev

你也可以在這裏顯示數組輸出嗎？ – vher2

你已經發布了你的API和API憑證..我不會在公開帖子中推薦它。 –

這些Api憑據是虛擬的，但感謝您對其進行編輯。下面是php截圖： https://postimg.org/image/4svg44ubn/ 和網絡中的html輸出。 https://postimg.org/image/b5vobivxr/ – camdev

有幾件事情會錯在這裏，第一關你的JavaScript是不完整的。 Ajax函數和jQuery準備好都沒有正確關閉。

$(function() { 

var $data = $('#content'); 
$.ajax({ 
    type:'GET', 
    dataType:'jsonp', 
    url:'https://syncslider-ehnoxx07.c9users.io/default-preview-template.php', 
    success: function (data) { 
    $('#content').html(data) 
}); 
});

我不是專家，對PHP，莫比別人能透露這部分的一些情況。但在我看來，代碼中缺少json響應頭。

此外，$ data變量從不使用，您可以將其刪除或在成功回調中提供。

來源

2016-09-26 06:38:43 Remco

首先，您應該修復您的JavaScript關閉，因爲Remco說。

其次，看起來你的php在json對象之後返回了一個字符串test，這樣jQuery就無法將它轉換爲有效的Javascript對象。這似乎是這裏的核心問題。由於它不是代碼中的任何地方，我們只能假設它是代碼中的其他位置（這很好，因爲它更容易擦除），或者它可能與curl的響應一起，在這種情況下，您必須編寫一個正則表達式在打印之前將其從字符串中移除。

第三，您不能直接將數據對象輸入到html函數，因爲它需要一個字符串而不是一個對象，您應該只通過thumbnail_url屬性。

下面是一些修改/校正代碼片段爲您：

function() { 
    var $data = $('#content'); 
    $.ajax({ 
     type:'GET', 
     dataType:'json', 
     url:'https//www.website.com', 
     success: function (data) { 
      $('#content').html(data[0].thumbnail_url); 
     } 
    }); 
});

在這段代碼中我做到了通過使用data[0]使用該數組中的第一個對象的縮略圖，但你要提高你的代碼使用你需要的或從PHP發送的只有你實際使用的那個。

重要

不相關的問題，但你也應該編輯你的PHP代碼打印關聯數組作爲最外層的陣列，這樣就可以防止Json Hijacking。

來源

2016-09-26 07:16:55 emiliopedrollo

感謝您的輸入，我仍然絆倒，並沒有完全得到爲什麼我不能得到我想要的輸出我已經試過你的代碼，並試圖循環通過它，以便我可以得到縮略圖的網址。這裏是屬性 – camdev

「template_name」：「Italiano」，「preview_url」：「http://example.mobilewebsiteserver.com/preview/dm-theme-20012-263」，「thumbnail_url」：「https：///dd-cdn.multiscreensite.com/themes-panel/preview/italiano.jpg「，」template_id「：20012, 」template_properties「：{ 這是我的forloop [link] http://jsbin.com/ nuboqogeme /編輯？html，js，輸出 – camdev

您應該爲您提出另一個問題來解決其他問題，而不是針對您可能遇到的每個不同問題編輯此問題。現在您的問題的性質與以前不同。如果對你有幫助，請接受這個答案，並對你的下列問題提出另一個問題（它將以這種方式獲得更多的可見性）。如果你喜歡，你可以在這裏放一個鏈接，這樣我們可以跟隨你到下一個問題並嘗試解決它。 – emiliopedrollo

使用ajax從API獲取圖像

回答

相關問題