如何在加载时显示进度条，使用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>

原文由 Xavi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，这肯定会奏效。

开始了…

 function yourFunction(){

    setTimeout(function(){
        $('#loading').show();

        setTimeout(function(){
            //your ajax code goes here...
            $('#loading').hide();
        }, 500);

    }, 300);
}

您可以根据需要将 css 设置为进度条。默认隐藏此 div。

 <div id="loading">
    <img id="loading-image" src="img-src" alt="Loading..." />
</div>

原文由 Maitry Gohil 发布，翻译遵循 CC BY-SA 4.0 许可协议