javascript - 进行 AJAX 调用时显示 'loading' 图像

Question

我有以下 jQuery Ajax 调用:

$.ajax({
                   type: "POST",
                   url: "addtobasket.php",
                   data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval,
                   success: function(msg){
                     $.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" },
                     function(data){
                        $('.preorder').empty();
                         $('.preorder').append(data); 
                     }); 
                   }
                 });

我想在 ajax 调用进行时显示图像。我该怎么做？

谢谢，

Answer 1

试试这个:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#loading')
            .hide()
            .ajaxStart(function() {
                $(this).show();
            })
            .ajaxStop(function() {
                $(this).hide();
            });
    });
</script>

<div id="loading">
        Loading....
</div>

这将在您每次执行 ajax 请求时显示加载图像，我在页面顶部实现了这个 div，因此它不会阻碍页面，但您始终可以看到 ajax 调用何时进行在。