イメージをJSONに保存するにはどうすればよいですか？

のindex.html：イメージをJSONに保存するにはどうすればよいですか？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Ajax</title> 
</head> 
<body> 
    <h2>jQuery AJAX (open in Firefox)</h2> 
    <h3> Get partial page content using:</h3> 
     <button id="btnAjax" > .ajax() REST</button> 
    <button id="btnLoadText">.load() Text File</button> 
    <h2> Result</h2> 
    <div id="showResult"></div> 
    <div> <img id="i1"> </div>  
<hr> 
<a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="ajax.js"></script> 
</body> 
</html>

ajax.js：

$('#btnLoadText').click(function() { $("#showResult").load("show.txt"); }); 
    $('#btnAjax').click(function() { callRestAPI() }); 

    // Perform an asynchronous HTTP (Ajax) API request. 
    function callRestAPI() { 
    var root = 'https://jsonplaceholder.typicode.com'; 
    $.ajax({ 
     url: root + '/photos/6', 
     method: 'GET' 
    }).then(function (response) { 
     console.log(response); 
     $('#i1').attr("src", response.url); 
     $('#showResult').html(response.body); 
    }); 
    } 
})(jQuery);

私はdivタグのIDを使って試してみました。しかし、私は画像を表示されませんでした。画像タグを使用せずに画像を読み込む別の方法を教えてもらえますか？

出典

2017-03-06 cdmo_mr

あなたはあなたの質問について明白にする必要があります。ATMには別の質問があります.... –

response.urlには画像の正しいURLが含まれていますか？ response.urlのログを記録して、目的のURLが表示されているかどうかを確認してください。

URLがresponse.bodyに含まれている可能性があります（JSONレスポンスを受け取っているかどうかわからないため、より正確な回答を得るにはajaxレスポンスを送信すると便利です）。

出典

2017-03-06 01:02:28 subwaymatch

私は、リクエストURLに何か問題についての私の以前の回答/コメントを削除：私は次の関数で私の地元のプロジェクトにコードをテストした：私は「jqueryの-1.10.2.js」を使用

function callRestAPI() { 
var root = 'https://jsonplaceholder.typicode.com'; 
$.ajax({ 
    url: root + '/photos/6', 
    method: 'GET', 
    success: function (data) { 
     console.log(data); 
     $('#i1').attr("src", data.url); 
    } 
}); 
}

、それを試して私に知らせてください。

出典

2017-03-06 01:37:55

更新が行われないのは、要素が登録されるのを待っていないためです。

2つのクリックセッターを$(document).ready(function(){//your setters here});コールに入れると、問題が解決するはずです。

jQueryを頭にロードする必要があります。慣例として、スクリプトとリンクされたリソースをhead要素にロードします。

//wait for the document to existts before assigning the jquery. 
 
$(document).ready(function() { 
 

 
\t $('#btnLoadText').click(function() { $("#showResult").load("show.txt"); }); 
 
\t $('#btnAjax').click(callRestAPI); 
 

 
}); 
 

 
// Perform an asynchronous HTTP (Ajax) API request. 
 
function callRestAPI() { 
 
\t console.log("yolo"); 
 
\t var root = 'https://jsonplaceholder.typicode.com'; 
 
\t $.ajax({ 
 
\t \t url: root + '/photos/6', 
 
\t \t method: 'GET' 
 
\t }).then(function (response) { 
 
\t \t console.log(response); 
 
\t \t $('#i1').attr("src", response.url); 
 
\t \t $('#showResult').html(response.body); 
 
\t }); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <title>Ajax</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    </head> 
 
    <body> 
 
    
 
    <h2>jQuery AJAX (open in Firefox)</h2> 
 
    <h3> Get partial page content using:</h3> 
 
    
 
    <button id="btnAjax"> .ajax() REST</button> 
 
    <button id="btnLoadText">.load() Text File</button> 
 
    
 
    <h2> Result</h2> 
 
    <div id="showResult"></div> 
 
    
 
    <div> 
 
     <img id="i1"> 
 
    </div> 
 
    
 
    <hr> 
 
    
 
    <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a> 
 
    </body> 
 
</html>

出典

2017-03-06 01:42:01

http://stackoverflow.com/questions/4643990/is-document-ready-necessary –

それは面白いですが、準備が整った書類を使用し続けます。もう1つの注釈では、人々がheadタグの外にリンク/リモートスクリプトを置いている理由は何ですか？私は彼らが頭のタグにいることを必要としなかったいかなる慣習も見たことがない。 –

スクリプトがすぐに必要でないときや、頭にたくさんのスクリプトを置いているときに、上から下に読み込まれるのでページの読み込みが遅くなり、頭の中のすべてのスクリプトが完了するとページが読み込まれるだけです。 –

私は、これはあなたがロードしようとしているイメージであるかどうかわからないんだけど、コードからあなたがそこに私たちを与えている：ここでは

は、それがどのように見えるかです小さなタイプミスですが、jsの末尾に追加のスニペット})(jQuery);があります。相続人はそれと同じコードを除去し、一般的なイメージのロゴがうまく表示されます：

$('#btnLoadText').click(function() { 
 
    $("#showResult").load("show.txt"); 
 
}); 
 
$('#btnAjax').click(function() { 
 
    callRestAPI() 
 
}); 
 

 
// Perform an asynchronous HTTP (Ajax) API request. 
 
function callRestAPI() { 
 
    var root = 'https://jsonplaceholder.typicode.com'; 
 
    $.ajax({ 
 
    url: root + '/photos/6', 
 
    method: 'GET' 
 
    }).then(function(response) { 
 
    console.log(response); 
 
    $('#i1').attr("src", response.url); 
 
    $('#showResult').html(response.body); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Ajax</title> 
 
</head> 
 

 
<body> 
 
    <h2>jQuery AJAX (open in Firefox)</h2> 
 
    <h3> Get partial page content using:</h3> 
 
    <button id="btnAjax"> .ajax() REST</button> 
 
    <button id="btnLoadText">.load() Text File</button> 
 
    <h2> Result</h2> 
 
    <div id="showResult"></div> 
 
    <div> <img id="i1"> </div> 
 
    <hr> 
 
    <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
    <script src="ajax.js"></script> 
 
</body> 
 

 
</html>

、すべてが私には正常に見えますか？

出典

2017-03-06 04:53:57

イメージをJSONに保存するにはどうすればよいですか？

答えて

関連する問題