在Web服务运行时显示加载 [英] Display loading while webservice is running

问题描述

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

On the initial request to a page, I trigger a webservice and want to display a loading message. When the page has finished loading, I want to remove the waiting message from screen, but display it again when a change event in a checkbox triggers an Ajax call with another loading message.

此代码不符合给定的规范:

This code is not behaving to the given spec:

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

我在做什么错了?

推荐答案

您需要重新排列代码，如下所示:

You need to rearrange your code a bit, like this:

$(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() { })中(在此处查看详细信息)，不需要将其包裹两次.

document.ready takes a function, you're passing it a jquery element. $(function() { }) is equivalent to wrapping it in $(document).ready(function() { }) already (see details here), no need to wrap it twice.

这篇关于在Web服务运行时显示加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！