Javascript 使用AJAX查询更新modal并等待

我有一个使用AJAX的基本jQuery函数。单击一个按钮时，会发出一个AJAX调用，成功后，将模态的HTML设置为响应

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);
                },
                complete: function(response) {
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

代码运行得很好，但我遇到的问题是，当模态第二次启动时。它显示上一个AJAX调用的HTML内容，然后在1-2之后立即更改。因此，我认为show方法是在HTML完全设置为响应之前被调用的

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);
                },
                complete: function(response) {
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

现行代码

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);                        
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

我试着把这个节目放在一个完整的范围内，但我仍然得到了同样的回应

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);
                },
                complete: function(response) {
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

---

我想问一下，如何让quickviewModel仅在完全设置为AJAX响应后才显示。

也许您可以尝试以下方法：

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);
                },
                complete: function(response) {
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

$.ajax({
    type: "GET",
    url: '/Product/Index',
    data: {
        slug: this.id,
        type: this.name,
    },
    beforeSend: function() {
        $("#quickviewModal").html("");
    },
    success: function(response) {
        $("#quickviewModal").html(response);
        $('#quickviewModal').modal('show');
    },
    complete: function(response) {
    }
});

---

关于jQuery状态的更多信息，您可以在这里找到：

当成功回调发生时，ajax响应已被完全接收。你的问题没有道理，太好了。很高兴它有帮助！