Question

我现在使用的是javascript，我试图在ajax启动时显示一个指示符图标，并在完成后隐藏它，下面是我的代码：

CSS:
 div.ajax-progress {
      //some setting and url
}
<body>
   <div class="ajax-progress"></div>
</body>
Javascript:

$('#fileToUpload').on('change', function(e) {

            var file = e.target.files[0];
            var formData = new FormData($('form')[0]);
            imageId = cornerstoneWADOImageLoader.fileManager.add(file);


            $.ajax({
            url: 'loadfile.php',
            type: 'POST',
            data: formData,
            async: false,
            dataType: 'json',
            timeout : 60000,
            beforeSend :function(){
                $(".ajax-progress").show();
            }，
            success: function (html) {}
           $(".ajax-progress").hide();
             //doing something}
        });
    });

但没有任何反应，任何想法？赞赏。

Answer 1

也许如果你在调用ajax $(".ajax-progress").show();之前放置$.ajax({});并将它隐藏在成功中。

Answer 2

我不知道这与您的代码中的内容是否相同，但您注释了成功结束括号}

您还可以使用console.log（）或alert（）来查看代码中发生了什么。

Answer 3

尝试重写您的ajax，如下所示：

$.ajax({
   url: 'loadfile.php',
   type: 'POST',
   data: formData,
   async: false,
   dataType: 'json',
   timeout : 60000,
   beforeSend :function(){
      //do something
   }，
   success: function (html) {
      //doing something
   }
});

$(document).ajaxStart(function() {
    $(".ajax-progress").show();
});

$(document).ajaxStop(function() {
    $(".ajax-progress").hide();
});

这将在应用程序中的所有ajax请求中显示和隐藏$(".ajax-progress")。

ajax进度加载无法正常工作

3 个答案: