json - JSON、AJAX、JQuery を使用した動的な画像の読み込みとイベント バインディング

Question

Web サイトに画像を動的に追加したいと考えています。ユーザーがボタンをクリックすると、jquery を介した ajax 呼び出しがサーバーに対して行われ、画像の URL と ID を含む json ファイルが返されます。これらの画像を Web ページにレンダリングし、スタイルを変更して (条件に基づいて表示)、これらの画像にクリック イベントを追加します (イベントを発生させる画像の ID をキャプチャする単一のイベント ハンドラー)。私を助けてください。

Answer 1

次のようにイメージ要素を作成できます。

var img=document.createElement("img");
img.onclick=function() { /* js code here*/ };
img.src="http://example.com/example.jpg";
img.style.display="block";
/* or give css class, image.className="picture" */

次に、「imagecontainer」という名前の div のどこかに追加します。たとえば、 <div id="imagecontainer">

document.getElementById("imagecontainer").appendChild(img);

その後、完了:)

ps ajaxコードはありませんか？この URL は役に立ちます。このコードをサンプル コードに追加するだけで完了です。http://api.jquery.com/jQuery.getJSON/

Answer 2

そんな感じ：

HTML

<img id="15623" src="img/default.jpg" />

jQuery

$('img').click(function () {
    var context = $(this);
    $.getJSON('/getImage.php?id=' + $(this).attr('id'), function (json) {
        context.attr('src', json.url);
    });
});

PHP

//db connection

$id = $_GET['id'];

if (is_numeric($id)) {
    $query = mysql_query('SELECT url FROM img WHERE id = '.$id);
    $res = mysql_result($query, 0);
    return '{"url": "'.$res.'"}';
}