三生石@ 2017-10-27 00:34 采纳率: 100%
浏览 8

Ajax繁忙指示器

How can I add a busy indicator before the Ajax popup appears on screen? I have been trying to follow several examples, but they are overly complex and very confusing for what seems should be an easy fix. Can anyone please help? Very new to Ajax. Thank you!

<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>
  • 写回答

1条回答 默认 最新

  • weixin_33725807 2017-10-27 00:42
    关注

    You have to add the indicator when starting the ajax call and remove it when the call returns.

    But you should fix your html (input element is only valid inside a form tag) and then you have to prevent the form submission. If you follow this rules your code looks like this:

    $(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);
        });
    });
});
    评论

报告相同问题？

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题