json - 使用 JSON、AJAX 和 JQuery 的动态图像加载和事件绑定

Question

我想动态地将图像添加到我的网站。当用户单击按钮时，通过 jquery 对服务器进行 ajax 调用，返回一个包含图像 url 和 ids 的 json 文件。我想在我的网页上呈现这些图像，然后更改它们的样式（根据某些条件显示），然后将点击事件添加到这些图像（单个事件处理程序将捕获引发事件的图像的 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.'"}';
}