0

我目前正在开发一个框架，其中我有一个 Python 后端、一个 API 文件作为通信层（也在 Python 中，使用来自 http.server 的 BaseHTTPRequestHandler）和一个 JavaScript/HTML 前端。我的框架当前设置的方式是用户在前端输入一些内容，这会触发使用 jQuery 的 POST 请求。

此 POST 请求为要在后端（服务器）上运行的 Python 方法提供所需的输入。我遇到的问题是，只要方法仍在运行，我希望能够显示进度条并将其显示在用户界面（前端）上。

任何人都知道如何实现这一点？

编辑：这是我当前架构的代码示例，前端有一个假进度条。

接口：

class MyServer(BaseHTTPRequestHandler):
    def __init__(self, request: bytes, client_address, server) -> None:
        super().__init__(request, client_address, server)

    def do_POST(self):
        # Send our response code, header, and data
        self.send_response(200)
        self.send_header("Content-type", "Application/json")
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Accept')
        
        body = self.rfile.read(int(self.headers['Content-Length']))
        print(body)
        try:
            body = json.loads(body)
        except ValueError:
            pass

        if self.path.startswith('/exampleRequest'):
            contentType = 'application/json'
            logging.info('Running Request...')
            my_list = []
            for i in tqdm(body['numbers']):
                my_list.append(i)
            response = json.dumps(my_list)
        self.end_headers()
        self.wfile.write(response.encode('UTF-8'))

if __name__ == "__main__":        
    webServer = HTTPServer(("", serverPort), MyServer)
    print("Server started http://%s:%s" % ("", serverPort))

    try:
        webServer.serve_forever()
    except KeyboardInterrupt:
        pass

前端（JavaScript/HTML）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function updateSettings(){
  $.ajax({
  url: "ip-address:port/exampleRequest",
  type: 'POST',
  data: 
      JSON.stringify({
          'numbers': selectedAlgos,
      })
  })
}
var i = 0;
function move() {
    if (i == 0) {
      i = 1;
      var elem = document.getElementById("myBar");
      var width = 10;
      var id = setInterval(frame, 10);
      function frame() {
        if (width >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width  + "%";
        }
      }
    }
  }
</script>
<body>
<br><b>Progress:</b><br>
</div>
<div id="myProgress">
    <div id="myBar">0%</div>
  </div>
  <br><button onclick="updateSettings();move()">Submit</button><br>
4

0 回答 0