ajaxを使ってAPIから画像を取得する

私のコンソールにはエラーは表示されませんが、私が得たいのはPHPファイルのjsonであるthumbnail_urlです。コンソールでは、配列文字列であることを示しています。どうすればそれにアクセスできますか？ajaxを使ってAPIから画像を取得する

EDITS：私は希望の出力を実行することができましたが、問題は最後のオブジェクトがブラウザで出力された唯一のものでした。いくつかの物事が間違ってここに行く

<!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オフ不完全です：

<?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リクエストです。 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、mabyの専門家ではありません。他の誰かがその部分を明らかにすることができます。しかし、それは私には、コード内にjsonレスポンスヘッダーがないようです。

また、$ data変数は決して使用されません。$ data変数は決して使用されません。あなたはそれを削除することも、成功のコールバックの中で供給することもできます。

出典

2016-09-26 06:38:43 Remco

まず、Remco氏によると、JavaScriptのクロージャを修正する必要があります。

第2に、あなたのPHPがjsonオブジェクトの後に文字列testを返しているようです。そうすればjQueryはそれを有効なJavascriptオブジェクトに変換できません。それはここでの中心的な問題と思われる。あなたが私たちをサンプリングしたコードのどこにもないので、あなたのコードのどこかにあると推測することができます（消すのが簡単だからいいです）か、カールの反応と一緒だった可能性があります。この場合、それを印刷する前にそれを文字列から削除する正規表現。

第3に、オブジェクトではなく文字列が必要なので、データオブジェクトを直接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から送信することができます。

重要

なく、あなたの問題に関連していますが、最も外側の配列、あなたがJson Hijackingを防ぐことができる方法として、連想配列を印刷するには、あなたのPHPコードを編集する必要があります。

出典

2016-09-26 07:16:55 emiliopedrollo

入力してくれてありがとう、私はまだまだ立ち往生して、私が望む出力を得ることができない理由を得ることができません。私はあなたのコードを試して、サムネイルURLを得ることができるようにループしました。ここには – 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/edit？html、js、output – camdev

あなたはあなたが遭遇するかもしれないさまざまな問題ごとにこれを編集するのではなく、別の問題をあなたに求めてください。あなたの問題の性質は以前とは異なっています。この回答があなたにとって有益だった場合はそれを受け入れ、次の質問で別の質問をしてください。あなたが好きな人は、ここにリンクを張って次の質問にあなたを追いかけることができます。 – emiliopedrollo

ajaxを使ってAPIから画像を取得する

答えて

関連する問題