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

根据load 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();
        });        
    });
});

Answer 2

您可以通过两种方式进行操作，但是要给自己带来灵活性，您可以考虑使用Promise方法（第二种方法）。

我还调整了一些其他代码，删除了全局变量，使用了.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

这是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);
});

在AJAX加载成功完成后执行一些操作

3 个答案: