Question

以下代码在后端执行某些操作，我需要在用户单击按钮时显示进度条或加载，直到操作执行。

<button type="button" onclick="test()">Click on</button>
 <script>
       function test() {
              $.ajax({
                      url: "test.php",
                      type: "POST",
                      success:function(result) {
                        alert("your process is done");
                        }
                    })
               }
</script>

Answer 1

完成此任务的最佳方法是分离API以注册操作并获取操作的状态。

基本上，您首先发送启动操作的请求，该请求将返回正在执行的操作的ID。然后，您可以定期发送请求以获取具有给定ID的操作的当前状态。

流程将是这样的：

client (browser)                           web server
      | -- POST request to start operation --> |
      | <-- ID of this operation instance ---- |
      |                                        |
   +->| -- GET status of operation instance -> |
   |  |    of ID                               |
   |  | <-- current status of operation -------|
   |  |      instance ID                       |
   +--|                                        |

这是因为PHP（以及几乎所有其他网络服务器）只会在写完所有内容后将输出缓冲区刷新到浏览器。当然有hacks来解决这个问题。

您还可以考虑为此实施基于WebSockets的解决方案，您可以在其中打开连接以启动操作，并从服务器接收进度事件。但老实说，这个用例有点过分了。

Answer 2

您可以在发送请求之前添加html代码。

    <button type="button" onclick="test()">Click on</button>
    <script>
    function test() {
          alert("your request is being processed.");
          //or , you can write your html here 
          $.ajax({
                  url: "test.php",
                  type: "POST",
                  success:function(result) {
                    alert("your process is done");
                    }
                })
           }
    </script>

如何在ajax函数中显示进度条？

2 个答案: