Ajax 响应返回错误响应答案

【问题标题】：Ajax response returns wrong responseAjax 响应返回错误响应
【发布时间】：2019-05-26 19:52:57
【问题描述】：

我的网站中有一个GET 方法的Ajax 请求。有一个传入消息的收件箱，其中写入了未读消息的数量，一旦用户阅读了未读消息，我使用 Ajax 请求更新未读消息的数量以获取新消息。

问题是，未读消息的数量在服务器端是正确的，但 Ajax 响应不是服务器在读取了一些未读消息后所说的。例如，如果有4未读消息，当我点击一条消息时，它变成3，当我点击另一条未读消息时，它又是3而不是2，而当我查看服务器响应时直接在浏览器中（请求是 GET），它是 2 而不是 3。所以我确信服务器端是正确的，但 Ajax 响应不是。

这是我的代码，里面有一些 Laravel 代码来指定路线。带有注释//this is request to unread message 的 Ajax 请求有问题。

<script>
    $(function () {
        $.ajaxSetup({
            cache: false
        });

        $(document).on('click', '.messageOutline .card-header', function () {
            var url = '{{route('messages.loadMessage', ":id")}}';
            url = url.replace(":id", $(this).parent().parent().attr('id'));
            $.get(url).done(function (data) {
                $("#messageColumn").html(data);
            });
            if($(this).hasClass('text-primary')){
                $(this).removeClass('text-primary').addClass('text-dark');
                var url = '{{route('messages.unreadMessages', ":id")}}';
                url = url.replace(":id", $(this).attr('id').substring(16));
                var id = $(this).attr('id').substring(16);
                $.get({url:url}).done(function (data) {//this is request to unread messages
                    alert("sent" + data);
                    if(data == 0)
                        $("#user-"+id).find('.count').remove();
                    else{
                        $("#user-"+id).find('.count').html(data);
                    }

                });
            }
        })
    });
</script>

【问题讨论】：

您是否尝试过console.log(url) 来查看您的网址是什么样的？您的网络选项卡在浏览器中显示什么；请求通过了吗？
@Soviut 就像我说的服务器是正确的。 url 是对的，我已经尝试过了。
所以你是说它从 4 变为 3，然后无限期地坚持到 3？ alert 是否也显示 3？除了您在“网络”选项卡上看到的请求结果之外，jQuery.get 没有理由返回任何其他内容。
@Jeto 没有。它显示3 两次然后1
@Jeto 我猜这可能是一种缓存

标签： javascript jquery ajax

【解决方案1】：

我通过以下更改解决了问题

        $(document).on('click', '.messageOutline .card-header', function () {
            $.ajaxSetup({ cache: false });
            var url = '{{route('messages.loadMessage', ":id")}}';
            url = url.replace(":id", $(this).parent().parent().attr('id'));
            var object = $(this);
            $.get(url).done(function (data) {
                $("#messageColumn").html(data);
                if(object.hasClass('text-primary')){
                    object.removeClass('text-primary').addClass('text-dark');
                    var url = '{{route('messages.unreadMessages', ":id")}}';
                    var id = object.attr('id').substring(16);
                    url = url.replace(":id", id);
                    $.get({url:url, cache: false}).done(function (data) {
                        if(data == 0)
                            $("#user-"+id).find('.count').remove();
                        else{
                            $("#user-"+id).find('.count').html(data);
                        }
                    });
                }
            });
        })

我将第二个 Ajax 请求移至第一个的成功函数。通过这种方式，我可以确定在读取消息并在数据库中更新其read 属性后获取未读消息的数量。

【讨论】：