Question

在对页面的初始请求中，我触发Web服务并希望显示加载消息。当页面加载完毕后，我想从屏幕上删除等待的消息，但是当复选框中的更改事件触发带有另一个加载消息的Ajax调用时，会再次显示它。

此代码不符合给定规范：

$(document).ready(
    $(function() {
     $('#loadingDiv').hide();

      $('#productsDropDown')
         .change(function() {
            var prodValue = $(this).val();
            $('#proddate').load('getpdate.php', {prod: prodValue });
    }); 

    $('#loadingDiv')
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })    
    ;   
    });
);

我做错了什么？

Answer 1

您需要稍微重新排列代码，如下所示：

$(function() {
  $('#loadingDiv').hide();
  $('#productsDropDown').change(function() {
    var prodValue = $(this).val();
    $('#proddate').load('getpdate.php', {prod: prodValue });
  }); 

  $('#loadingDiv').ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $(this).hide();
  });
});

目前你有这个：

$(document).ready(
    $(function() {
    });
);

document.ready接受一个函数，你传递一个jquery元素。 $(function() { })等同于将其包裹在$(document).ready(function() { })已经（see details here），无需将其包裹两次。

Answer 2

$(document).ready(function() {
    var loader = $('#loadingDiv');
    loader.hide();


    $('#productsDropDown').change(function() {
        var prodValue = $(this).val();
        loader.show();
        $('#proddate').load('getpdate.php', {prod: prodValue }, function() {
            loader.hide();
        });
    });
);

在Web服务运行时显示加载

2 个答案: