Question

如何在屏幕上出现Ajax弹出窗口之前添加忙碌指示符？我一直试图遵循几个例子，但它们过于复杂，而且对于看起来应该是一个简单的修复而言非常混乱。有人可以帮忙吗？对Ajax来说很新。谢谢！

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.button').click(function(){
            var clickBtnValue = $(this).val();
            var ajaxurl = 'auto.php',
            data =  {'action': clickBtnValue};
            $.post(ajaxurl, data, function (response) {
                alert(response);
            });
        });

    });
    </script>
</head>
<body>
    <input type="submit" class="button" name="Start" value="Start" />
</body>
</html>

Answer 1

您必须在启动ajax调用时添加指示符，并在调用返回时将其删除。

但你应该修复你的html（输入元素只在表单标签内有效），然后你必须阻止表单提交。如果您遵循此规则，您的代码如下所示：

$(document).ready(function(){
    $('.button').click(function(evt){
       // preventing the form submission
        evt.preventDefault();
        var clickBtnValue = $(this).val();
        var ajaxurl = 'auto.php',
        data =  {'action': clickBtnValue};
        // add indicator here (before the ajax request starts)
        var $indicator = $('<div>Ajax in progress...</div>').appendTo('body');
        $.post(ajaxurl, data, function (response) {
            // removing the indicator inside the success handler of the ajax call.
            $indicator.remove();
            alert(response);
        });
    });
});

Ajax忙指标

1 个答案: