在执行 ajax 时显示加载图像

Question

我正在尝试将 ajax 加载图像添加到 div 容器，同时执行 ajax 请求。

我的 Jquery 代码如下所示：

<script type="text/javascript">
    $(document).ready(function(){
        $("#store, #gender, #username").change(function () {
            var store = $("#store").val();
            var gender = $("#gender").val();
            var receiver = $("#username").val();

            $.ajax({
                type: "POST",
                data: {
                    "store" : store,
                    "gender" : gender,
                    "receiver" : receiver
                },
                url: "handling/ajax/store_items_ajax.php",
                success: function(data){
                    $("#result").html(data);
                }
            });
        });
    });
</script>

如何将加载图像添加到以下 html div：

<div id="result" class="col-md-12"></div>

有人知道吗？

Answer 1

逻辑

- Create progress div element
<div id="progress">
    <img style="width:100%" src="/images/spinner.gif"/>
</div>

- By default hide this progress div
- Show when passing ajax request
- Hide when you get ajax response

脚本

<script type="text/javascript">

    $(document).ready(function() {

      $("#store, #gender, #username").change(function () {
        var store = $("#store").val();
        var gender = $("#gender").val();
        var receiver = $("#username").val();

        $('#progress').show(); //show progress bar

        $.ajax({
            type: "POST",
            data: {
              "store" : store,
              "gender" : gender,
              "receiver" : receiver
            },
            url: "handling/ajax/store_items_ajax.php",
            success: function(data){
              $('#progress').hide(); //hide progress bar
              $("#result").html(data);
            }
        });
      });

    });

</script>