使用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获取图像

回答

相关问题