使用 Jquery 在 AJAX 内部加载 AJAX

Load AJAX inside of AJAX using Jquery

本文关键字：AJAX 内部 加载 Jquery 使用      更新时间：2023-09-26

我的以下代码有问题。它工作正常，直到它开始对第一个 ajax 函数中加载的 html 应用更改为止。

基本上，我试图将一个ajax调用嵌套在另一个调用中。

$(document).on("click", '#advertiser-email-submit', function(event) {
    $(this).blur();
    var email = $("#advertiser-email").val();
    $(".marketing").hide().html("");
    $("#stats-container").hide().html("");
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show();
    $.post("https://www.example.com/advertisers/interface/email/submit", {
            email: email
        },
        function(data, status) {
            if (status == "success") {
                if (data.length > 0) {
                    //Load advertiser interface
                    $("#advertiser-container").hide().html(data).show();
                    //Load exchange visits list
                    var advertiser_id = $("#advertiser-overview").data("advertiser-id");
                    //THIS IS WHERE IT STARTS TO FAIL
                        $("#exchange-visits-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div><div class="col-md-5"></div></div>').show();
                        $.post("https://www.example.com/advertisers/interface/exchange/visits/list", {
                                advertiser_id: advertiser_id
                            },
                            function(data, status) {
                                if (status == "success") {
                                    if (data.length > 0) {
                                        $("#exchange-visits-container").hide().html(data).show();
                                    }
                                }
                            });
                }
            }
        });
    return false;
});

将内部函数包装在文档中准备就绪，而不仅仅是调用 ajax

$(document).on("click", '#advertiser-email-submit', function(event) {
    $(this).blur();
    var email = $("#advertiser-email").val();
    $(".marketing").hide().html("");
    $("#stats-container").hide().html("");
    $("#advertiser-container").hide().html('<div style="height:64px;"><div class="col-md-5"></div><div class="col-md-1"><img src="https://www.example.com/images/spinner_white_green.gif"></div><div class="col-md-5"></div></div>').show();
    $.post("https://www.example.com/advertisers/interface/email/submit", {
        email: email
    },
    function(data, status) {
        if (status == "success") {
            if (data.length > 0) {
                //Load advertiser interface
                $("#advertiser-container").hide().html(data).show();
                //Load exchange visits list
                var advertiser_id = $("#advertiser-overview").data("advertiser-id");
                    var template = $('#templateId').removeAttr('id');
                    $("#exchange-visits-container").hide().html(template ).show();
                    $.post("https://www.example.com/advertisers/interface/exchange/visits/list", {
                        advertiser_id: advertiser_id
                    },
                    function(data, status) {
                        if (status == "success") {
                                if (data.length > 0) {
                                $("#exchange-visits-container").hide().html(data).show();
                            }
                        }
                    });
            }
        }
    });
   return false;
});

此外，如果您使用这样的模板，调试和清理代码会更容易： 

<div id="templateId" style="height:64px;"><div class="col-md-5">
   </div><div class="col-md-1"><img src="https://www.example.com/images/spinner_black_white.gif"></div>
   <div class="col-md-5"></div>
</div>

然后你可以像这样更轻松地设置 HTML：

 var template = $('#templateId').removeAttr('id');
 $("#exchange-visits-container").hide().html(template ).show();

这只是一个例子，所以你应该隐藏模板，然后也让它可见

相关文章：