如何使用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({&nbsp; &nbsp; xhr: function() {&nbsp; &nbsp; &nbsp; &nbsp; var xhr = new window.XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; // Upload progress&nbsp; &nbsp; &nbsp; &nbsp; xhr.upload.addEventListener("progress", function(evt){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (evt.lengthComputable) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var percentComplete = evt.loaded / evt.total;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Do something with upload progress&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(percentComplete);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;}, false);&nbsp; &nbsp; &nbsp; &nbsp;// Download progress&nbsp; &nbsp; &nbsp; &nbsp;xhr.addEventListener("progress", function(evt){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (evt.lengthComputable) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var percentComplete = evt.loaded / evt.total;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Do something with download progress&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(percentComplete);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;}, false);&nbsp; &nbsp; &nbsp; &nbsp;return xhr;&nbsp; &nbsp; },&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; url: "/",&nbsp; &nbsp; data: {},&nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; // Do something success-ish&nbsp; &nbsp; }});

Answer 2

<script>$(function() {&nbsp; &nbsp; $("#client").on("change", function() {&nbsp; &nbsp; &nbsp; var clientid=$("#client").val();&nbsp; &nbsp; &nbsp;//show the loading div here&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type:"post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"clientnetworkpricelist/yourfile.php",&nbsp; &nbsp; &nbsp; &nbsp; data:"title="+clientid,&nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#result").html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //hide the loading div here&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; });});</script>或者，您也可以这样做：$(document).ajaxStart(function() {&nbsp; &nbsp; &nbsp; &nbsp; // show loader on start&nbsp; &nbsp; &nbsp; &nbsp; $("#loader").css("display","block");&nbsp; &nbsp; }).ajaxSuccess(function() {&nbsp; &nbsp; &nbsp; &nbsp; // hide loader on success&nbsp; &nbsp; &nbsp; &nbsp; $("#loader").css("display","none");&nbsp; &nbsp; });