ajax를 사용하여 API에서 이미지 가져 오기

내 콘솔에 아무런 오류가 없지만 PHP에서 json 인 thumbnail_url을 얻고 싶습니다. 콘솔에서 배열 문자열이라는 것을 보여 주며 어떻게 접근 할 수 있습니까?ajax를 사용하여 API에서 이미지 가져 오기

편집 : 원하는 출력을 실행할 수는 있지만 마지막 개체는 브라우저에서 출력되는 유일한 개체입니다. 몇 일이 잘못 여기거야

<!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

, 먼저 자바 스크립트 떨어져 불완전 :

<?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-function과 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

먼저 Remco는 자바 스크립트 클로저를 수정해야한다고 말했습니다.

두 번째로, php가 json 객체 뒤에 test 문자열을 반환하고있는 것처럼 보입니다. 그러면 jQuery가 유효한 Javascript 객체로 변환 할 수 없습니다. 이것이 핵심 이슈 인 것 같습니다. 그것은 당신이 우리를 샘플링 한 코드의 어디에도 없기 때문에 코드의 다른 곳 (예 : 지우기가 쉽기 때문에)에있는 것으로 추정하거나 컬의 응답과 함께했을 수 있습니다.이 경우에는 그것을 인쇄하기 전에 그것을 문자열에서 제거하는 정규 표현식.

세 번째로 객체가 아닌 문자열을 기대하므로 데이터 객체를 직접 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

입력 해 주셔서 고마워요. 여전히 비틀 거려서 원하는 출력을 얻을 수없는 이유를 얻지 못하고 코드를 시험해 보았고이를 통해 반복하여 축소판 URL을 얻을 수있었습니다. 여기에 – camdev

"template_name"속성 : "이탈리아어", "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/edit? html, js, output – camdev

다른 문제에 대해 물어 보셔야합니다. 문제의 성격은 이전과 다릅니다. 도움이된다면이 답변을 수락하고 다음 질문에 대해 다른 질문을하십시오 (그렇게하면 더 많은 가시성을 얻을 수 있습니다). 원할 경우 여기에 링크를 추가하여 다음 질문에 따라 해결할 수 있습니다. – emiliopedrollo

ajax를 사용하여 API에서 이미지 가져 오기

답변

관련 문제