客户端 POST 请求后 Flask 'render_template'

Question

所以，我正在开发一个小型 Web 应用程序，它有一个小 canvas，用户应该画一些东西，然后我想用那个图像做一些 python canvas。像这样：

这工作正常。当我按下“点击我！”时，我调用了一个 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')

第一个路由只是打开了canvas，第二个是在客户端请求后执行的，它有这个功能：

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()

这样我就可以看到图像并准确地从 canvas 中得到绘图，我现在应该处理它：

但是之后没有呈现结果页面，没有任何反应。为什么？

Answer 1

问题是您正在 return 浏览页面以响应 post 图片的调用。相反，您应该 return 一个响应（例如 json 格式）包含有关刚刚进行的调用结果的信息（即图像的 post ），因此，在客户端，您必须将用户重定向到适当的页面。

要了解它为何不起作用，请打印return来自

调用的响应内容

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

alert(response);

客户端 POST 请求后 Flask 'render_template'

Flask 'render_template' after client POST request

javascript

python

ajax

jquery

flask