Сделайте что-нибудь, когда загрузка 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

Вот как вы можете сделать это после успеха 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);
});

Answer 2

Вы могли бы сделать это двумя способами, но чтобы дать себе гибкость, вы могли бы рассмотреть способ обещаний (второй).

Я также скорректировал некоторые другие ваши коды, удалил глобальные переменные, использовал .data() вместоattr() и т. д.

Обратите внимание, что вы МОЖЕТЕ использовать события ajax, такие как ajaxStop, я приведу пример этого.

$(document).ready(function() {
  $(".mainstuff").on('click', 'button', function() {
    $('#loader').show();
    let status = $(this).data("name");
    let new_url = "demo_text.php?job_id=" + status;
    $("#div1").load(new_url, function(newcontent) {
      $('#loader').hide();
      $(this).html(newcontent);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Второй способ использования обещаний: обратите внимание, удаляйте те, которые вам не нужны.

$(document).ready(function() {
  $(document).on("ajaxSend", function() {
    $("#loading").show();
  }).on("ajaxStop", function() {
    $("#loading").hide(1000);
  });

  $(".mainstuff").on('click', 'button', function() {
    $('#loader').show();
    let status = $(this).data("name");
    let new_url = "demo_text.php?job_id=" + status;

    var myloader = $.ajax({
      url: new_url,
      data: {},
      dataType: "html", // or whatever returns
      type: 'GET'
    });
    myloader.done(function(newcontent) {
      $("#div1").html(newcontent);
    });
    // hide in second "success", could be in prior
    myloader.done(function(newcontent, textStatus, jqXHR) {
      $('#loader').hide();
    });
    // process when we fail!
    myloader.fail(function( jqXHR, textStatus, errorThrown) {
      $('#loader').hide();
      $('#loadfailed').text(textStatus+ " We are sorry, something is not right").show();
    });
    // hide no matter what when ajax returns
    myloader.always(function(newcontent) {
      $('#loader').hide();
    });
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loader" class="hidden">Loading of Great Stuff!</div>
<div id="loading" class="hidden">Loading Great Stuff!</div>
<div id="loadfailed" class="hidden">Loading Failed</div>
<div class="mainstuff">
  <button class="mybutton" data-name="myname">Main Stuff stuffer</button>
  <div class="div1 content-holder">
  </div>
</div>

Answer 3

Согласно load документации , вы бы сделали это следующим образом:

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