客户端POST请求后烧瓶'render_template'

Question

所以，我正在开发一个具有小画布的小型 Web 应用程序，用户应该绘制一些东西，然后我想用该画布中的图像做一些 python。像这样：

这工作正常。当我按下“点击我！”时，我调用了一个 JS 函数，将图像发布到我的 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);