Javascript 当AJAX加载成功完成时，请执行某些操作

我完全崩溃了，我刚刚丢失了一大堆代码，并试图匆忙地对其进行排序。我已经完成了大部分工作，但我有一个部分，当点击一个按钮时，它会加载一个页面并用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);
            }

但是我经常出错，任何帮助都会很好。谢谢根据负载情况，您可以这样做：

$(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();
        });        
    });
}); 

---

这就是Ajax成功后的工作方式

$.ajax({
    url: 'http://google.com',
    type: 'POST',//'GET','PUT','DELETE'
    headers: headers,
    data: {
        "fname": $("#fname").val(),
        "lname": $("#lname").val(),
        "email": $("#email").val()
    }
})
.then( result => {
    //append result to your html
    //Dynamic view
    $("#form1").hide();
    var html = '<div><span>First Name: ' + result.fName + '</span><span>Last Name: ' + result.lName + '</span></div>';
    $("#showValue").html(html);    
})
.catch( error => {
    alert('error ',error);
});

---

你可以做到这两种方式，但是为了给自己带来灵活性，你可以考虑第二种承诺。 我还调整了一些其他代码，删除了globals，使用了.data而不是attr等

注意，您可以使用ajaxStop之类的ajax事件，我在中给出了一个例子

$document.readyfunction{ $.mainstuff.“单击”、“按钮”功能{ $'loader'.show； 让status=$this.dataname； 让new_url=demo_text.php？job_id=+status； $div1.loadnew\u url，functionnewcontent{ $'loader'。隐藏； $this.htmlnewcontent； }; }; };

---

在这里提到这些错误将是一个良好的开端；将其放入codepen/jsfiddle中。请张贴您看到的确切错误。@ChrisCousins-如果您单击“编辑”，则会出现一个图标，基本上可以在问题中创建一条虚线。但你可能知道that@MarkSchultheiss这里没有足够完整的代码来实现这一点；它不完整？OP正在使用.load方法，它将非常适合他的情况，因为它接受在AJAX调用完成时执行的回调函数，在该回调中，如果AJAX成功/失败，您可以检查状态并执行任何您想执行的操作。