Question

我想使用ajaxStart和ajaxStop在Ajax请求之前和之后显示和隐藏加载gif。没有任何作用：

HTML：

<div id="loading" style="display: none"><img src="loading.gif></div>

JS：

$("#searchForm").submit(function(event)
{

    $.ajaxStart(function() {
    $( "#loading" ).show();
    });
    $.ajaxStop(function() {
    $( "#loading" ).hide();
    });

    $.ajax({
        type: 'POST',
        url: 'models/fetchUsers.php',       //the script to call to get data
        data: $("#searchForm").serialize(), //add the data to the form
        dataType: 'json',                   //data format
        success: function(data)             //on recieve of reply
        {

            $.each($(data), function(key, value) {
                $('#itemContainer').append(value.user_id);
            });
        },
        error: function()
        {
            $('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>');
        }
    });

Answer 1

尝试ajaxStart和ajaxStop

$(document).ajaxStart(function() {
      $( "#loading" ).show();
});
$(document).ajaxStop(function() {
      $( "#loading" ).hide();
});

您的HTML也存在问题（“loading.gif”）

<div id="loading" style="display: none"><img src="loading.gif"></div>

在提交功能中添加event.preventDefault();，这会阻止提交按钮提交表单。

或其他方式是只在函数中执行操作，而不调用ajax的全局函数。

$("#searchForm").submit(function(event)
{
    event.preventDefault();
    $( "#loading" ).show();
    $.ajax({
        type: 'POST',
        url: 'models/fetchUsers.php',       //the script to call to get data
        data: $("#searchForm").serialize(), //add the data to the form
        dataType: 'json',                   //data format
        success: function(data)             //on recieve of reply
        {

            $.each($(data), function(key, value) {
                $('#itemContainer').append(value.user_id);
            });
        },
        complete: function(){
            $('#loading').hide();
        },
        error: function()
        {
            $('#itemContainer').html('<i class="icon-heart-broken"> <?= $lang["NO_DATA"] ?>');
        }
    });
}

Answer 2

$(document).ajaxStart(function() {
   $("#gif-image-id").show();

}).ajaxStop(function(){
   $("#gif-image-id").hide();
});

将此作为单独的事件（在提交事件之外），并将选择器更改为图像ID实际所在的位置。

.ajaxStart和.ajaxStop不起作用

2 个答案: