javascript - 当 AJAX 加载成功完成时执行某些操作

Question

我彻底崩溃了，我刚刚丢失了一大堆代码，并试图急于对其进行排序。我已经完成了大部分工作，但我有一个部分，当单击按钮时，它会加载一个页面并使用 AJAX 显示它。一切正常，但我想在启动时添加一个加载 gif，然后仅在完成时隐藏它。我不断收到错误，我知道这很容易发生，但总是出错。

我刚刚将其添加到末尾，正确吗？它说它会检查所有已完成的 AJAX 功能？

$(document).ajaxStop(function() {
  //alert("LOADED");
  $('#loader').hide();
}); 

代码是

$(document).ready(function(){
    $(".mainstuff button").click(function(){
    $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "demo_text.php?job_id="+status;
        //alert(status);
        $("#div1").load(new_url);

// I want to hide when its loaded successfully here 
        $('#loader').hide();
    });
}); 

我知道它是这样的

.load(url, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#content").html(msg + xhr.status + " " + xhr.statusText);
            }

但我不断收到错误，任何帮助都会非常感谢

Answer 1

根据加载documentation ，你会这样做:

$(document).ready(function(){
    $(".mainstuff button").click(function(){
    $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "demo_text.php?job_id="+status;
        $("#div1").load(new_url, function() {
            // Callback executed once the load has been performed
            $('#loader').hide();
        });        
    });
});