Question

我正在使用Jquery Ajax函数将内容加载到页面。我添加了旋转图标，但是当内容完全加载到页面时，图标仍会显示。我不知道出了什么问题。

JS：

var spinner = "<img src='../images/ajax-loader.gif' boader='0'> 
                   &nbsp;Loading  products...";

$(document).ready(function()
{
    $.ajax(
    {
        beforeSend: function()
        {
            $('#myDiv').html(spinner)
        },
        url : '../include/process.php',
        type : 'post',
        data : { tag: 'getData' },
        dataType : 'json',
        success:function(data)
        {
            if(data.success)
            {
                $('table').show();
                $.each(data,function(index,record)
                {
                    if($.isNumeric(index))
                    {
                        var row = $("<tr/>");
                        $(  <td/>").text(record.id).appendTo(row);
                        $("<td/>").text(record.name).appendTo(row);
                        $("<td/>").text(record.sprice).appendTo(row);
                        $("<td/>").text(record.quantity).appendTo(row);
                        $("<td/>").text(record.date_added).appendTo(row);

                        row.appendTo('table');
                    }
                })
            }

            $('table').dataTable(
            {
                "bJQueryUI":true,

            })
        }
     });
});

Answer 1

当您成功收到ajax的回复时，您应该输入类似的内容：

success:function(data){
  $('#myDiv').hide();

  //continue your proccess
}

当响应成功时隐藏你的微调器

Answer 2

您还没有清除#myDiv内容......您的代码中也有一些错误。

$(document).ready(function(){

  var spinner = "<img src='../images/ajax-loader.gif' boader='0'> &nbsp;Loading  products...";

   $.ajax({
        beforeSend: function(){
            $('#myDiv').html(spinner)
            },
        url:'../include/process.php',
        type:'post',
        data:{tag:'getData'},
        dataType: 'json',
        success:function(data){
                                    $('#myDiv').empty();
                $('table').show();
                                $.each(data,function(index,record){
                    if($.isNumeric(index)){
var row = $("<tr/>");

$(  "<td/>").text(record.id).appendTo(row);

$("<td/>").text(record.name).appendTo(row);

$("<td/>").text(record.sprice).appendTo(row);

$("<td/>").text(record.quantity).appendTo(row);

$("<td/>").text(record.date_added).appendTo(row);

row.appendTo('table');

  });
}

$('table').dataTable({
    "bJQueryUI":true,


    });
    }

    });




$('table').dataTable({
 "bJQueryUI":true,


});

});

Answer 3

var spinner = "<img src='../images/ajax-loader.gif' boader='0'>&nbsp;Loading  products...";

$(document).ready(function () {
    $.ajax({
        beforeSend: function () {
            $('#myDiv').html(spinner)
        },
        url: '../include/process.php',
        type: 'post',
        data: {tag: 'getData'},
        dataType: 'json',
        success: function (data) {
            if (data.success) {
                $('#myDiv').empty(); // remove spinner
                $('table').show();
                $.each(data, function (index, record) {
                    if ($.isNumeric(index)) {
                        var row = $("<tr />");
                        $('<td />', {text: record.id}).appendTo(row);
                        $('<td />', {text: record.name}).appendTo(row);
                        $('<td />', {text: record.sprice}).appendTo(row);
                        $('<td />', {text: record.quantity}).appendTo(row);
                        $('<td />', {text: record.date_added}).appendTo(row);

                        row.appendTo('table');
                    }
                });
            }
            $('table').dataTable({
                bJQueryUI : true
            });
        }
    });
});

内容加载完成后无法关闭旋转图标

3 个答案: