如何使用Ajax在加载时显示进度栏

Question

我有一个下拉框。当用户从下拉框中选择一个值时，它将执行查询以从数据库中检索数据，并使用ajax在前端显示结果。这需要一点时间，因此在此期间，我想显示一个进度条。我进行了搜索，发现了许多关于创建上传进度条的教程，但是我还没有任何喜欢的教程。有人可以为我提供一些有用的指导吗？我的ajax代码：<script>$(function() {    $("#client").on("change", function() {      var clientid=$("#client").val();        $.ajax({            type:"post",            url:"clientnetworkpricelist/yourfile.php",            data:"title="+clientid,            success:function(data){             $("#result").html(data);            }        });    });});</script>

Answer 1

该链接描述了如何向xhr对象jquery添加进度事件侦听器。

$.ajax({

    xhr: function() {

        var xhr = new window.XMLHttpRequest();

        // Upload progress

        xhr.upload.addEventListener("progress", function(evt){

            if (evt.lengthComputable) {

                var percentComplete = evt.loaded / evt.total;

                //Do something with upload progress

                console.log(percentComplete);

            }

       }, false);

       // Download progress

       xhr.addEventListener("progress", function(evt){

           if (evt.lengthComputable) {

               var percentComplete = evt.loaded / evt.total;

               // Do something with download progress

               console.log(percentComplete);

           }

       }, false);

       return xhr;

    },

    type: 'POST',

    url: "/",

    data: {},

    success: function(data){

        // Do something success-ish

    }

});

Answer 2

<script>

$(function() {

    $("#client").on("change", function() {

      var clientid=$("#client").val();

     //show the loading div here

    $.ajax({

            type:"post",

            url:"clientnetworkpricelist/yourfile.php",

        data:"title="+clientid,

        success:function(data){

             $("#result").html(data);

          //hide the loading div here

        }

    }); 

    });

});

</script>

或者，您也可以这样做：

$(document).ajaxStart(function() {

        // show loader on start

        $("#loader").css("display","block");

    }).ajaxSuccess(function() {

        // hide loader on success

        $("#loader").css("display","none");

    });