使用JQuery重新加载图像

Question

我想使用jquery更改图片的src，但是我的代码不起作用。 这是我的代码：

$(document).ready(function () {
        $("#imgCaptcha").click(function () {
            $.ajax({
                url: "/Account/CaptchaImage",
                success: function (result) {
                    var img_src = $(this).attr('src');
                    var timestamp = new Date().getTime();
                    $(this).attr('src', img_src + '?' + timestamp);
                }
            });
        });
    });

编辑

我编辑了代码，但仍然无法正常工作：

$(document).ready(function () {
    $("#imgCaptcha").click(function () {
        $.ajax({
            url: "/Account/CaptchaImage",
            success: function (result) {
                var img_src = result;
                var timestamp = new Date().getTime();
                $("imgCaptcha").attr('src', img_src + '?' + timestamp);
            }
        });
    });

}）;

最终答案

$(document).ready(function () {
        $("#imgCaptcha").click(function () {
            $.ajax({
                url: "/Account/CaptchaImage",
                type: "post",
                success: function (result) {
                    $("#imgCaptcha").attr("src", "/Account/CaptchaImage/?r=" + Math.random());
                }
            });
        });
    });

Answer 1

您处于关闭状态，因此您所指的$(this)不是您认为的那个，您应将其保存在变量中以供以后访问：

    $("#imgCaptcha").click(function () {
        var self = $(this);
        $.ajax({
            url: "/Account/CaptchaImage",
            success: function (result) {
                var img_src = self.attr('src');
                var timestamp = new Date().getTime();
                self.attr('src', img_src + '?' + timestamp);
            }
        });
    });

Answer 2

$(document).ready(function () {
        $("#imgCaptcha").click(function () {
            $.ajax({
                url: "/Account/CaptchaImage",
                success: function (result) {
                    var img_src = $("#imgCaptcha").attr('src');
                    var timestamp = new Date().getTime();
                    $("#imgCaptcha").attr('src', img_src + '?' + timestamp);
                }
            });
        });
    });

Answer 3

您需要参考的是图像ID。 但是使用this会引用Ajax上下文。 你不想。 这就是为什么它给您错误。 请尝试以下代码

$(document).ready(function () {
        $("#imgCaptcha").click(function () {
            $.ajax({
                url: "/Account/CaptchaImage",
                success: function (result) {
                    var img_src = $('#imgCaptcha').attr('src');
                    var timestamp = new Date().getTime();
                    $('#imgCaptcha').attr('src', img_src + '?' + timestamp);
                }
            });
        });
    });

如果将代码更新为var img_src = result; 没有使它工作。 然后请知道您应该将响应作为纯图像源获得。 不是其他MIME类型数据的图像，例如link_here.png（XML）

你应该得到的是

/link/to/file.png

一旦被发现 您将加载图像，并为其添加Timestand。

您应该担心的是请求中的错误。 尽管您的代码足以加载图像。 但是您也应该始终尝试捕获错误事件。 将此添加到您的代码

error: function(XMLHttpRequest, textStatus, errorThrown) {
 alert("some error");
}

这会让您知道错误是什么。

其次，您应始终使用浏览器的控制台。 要知道请求是什么，发送到哪里以及响应是什么。 您可以在浏览器中使用F12访问它。 它甚至可以向您显示服务器发送给您的响应。

Answer 4

 <script> $("#refresh").click(function () { var img = $('<img />', { id: 'CaptchaImg' }); img.attr("style", "height:42px;") img.removeAttr("src") img.attr('src', '@Url.Action("ShowCaptchaImage", "Support")/' + new Date().getTime()); $("#test").html(''); img.appendTo('#test'); }); </script> 

$（“＃refresh”）。click（function（）{var img = $（“，{id：'CaptchaImg'}）; img.attr（” style“，” height：42px;“）img.removeAttr（ “ src”）img.attr（'src'，'@ Url.Action（“ ShowCaptchaImage”，“ Support”）/'+ new Date（）。getTime（））; $（“＃test”）。html（' '）; img.appendTo（'＃test'）;}）;