客户端 POST 请求后 Flask 'render_template'

Question

所以，我正在开发一个小型 Web 应用程序，它有一个小画布，用户应该画一些东西，然后我想用该画布上的图像执行一些 python 操作。像这样：

这工作正常。当我按下“Click me!”时，我调用一个 JS 函数将图像 POST 到我的 Flask 服务器。这也是有效的，问题是，在我收到图像后，我想渲染一个新页面来显示一些结果，但该页面根本没有渲染。

现在，我对 Javascript 完全陌生，几乎什么都不知道，基本上我使用的每个 JS 都是从互联网复制粘贴的，所以我假设我一定错过了一些非常简单的东西，我只是不知道是什么。

这是服务器代码：

from flask import Flask, render_template, request
import re
from io import BytesIO
import base64 
from PIL import Image

app = Flask(__name__)

@app.route("/")
def hello_world():
   return render_template('drawing.html')

@app.route("/hook", methods=['POST', 'GET'])
def hook():
   image_data = re.sub('^data:image/.+;base64,', '', request.form['imageBase64'])
   im = Image.open(BytesIO(base64.b64decode(image_data)))
   im.show()
   return render_template('results.html')

第一个路由只是打开画布，第二个路由在客户端请求后执行，其功能如下：

function surprise() {
  var dataURL = canvas.toDataURL();
  $.ajax({
    type: "POST",
    url: "http://127.0.0.1:5000/hook",
    data:{
      imageBase64: dataURL
    }
  }).done(function() {
    console.log('sent');
  });}

显然，这是有效的。我有一行：

im.show()

这样我就可以看到图像，并从画布上准确地得到绘图，我现在应该对其进行处理：

但结果页面随后没有呈现，什么也没有发生。为什么？

Answer 1

问题是您正在返回要查看的页面以响应发布图像的调用。相反，您应该返回一个响应（例如，以 json 格式），其中包含有关刚刚进行的调用结果（即图像的发布）的信息，因此，在客户端，您必须将用户重定向到适当的位置页 。

要了解它不起作用的原因，请打印调用返回的响应内容

var response = '';
$.ajax({ type: "POST",   
         url: "http://127.0.0.1:5000/hook",   
         data:{
             imageBase64: dataURL
         },
         success : function(text)
         {
             response = text;
         }
});

alert(response);