Python 中的方程求解器 webapp

Question

我正在 Python（Flask 框架）中制作一个方程求解器 webapp。应用程序获取用户输入 [a, b, c] 并通过调用服务器端 python 函数发送到服务器，并使用 AJAX.

显示结果

部分客户JavaScript：

$.getJSON($SCRIPT_ROOT + '/_serverFunction', { form data });

服务器Python函数：

@app.route('/_solve')
def solve():
    a = request.args.get('a')
    b = request.args.get('b')
    c = request.args.get('c')
    cof = [a, b, c]
    roots = np.roots(cof)
    return jsonify(roots)

以上工作正常，我根据输入显示结果。

但是，我还想在上面的结果旁边显示一个表示解决方案的图表。

我能够使用 matplotlib 在服务器上生成一个虚拟静态图，并使用以下内容发送到客户端：

<img src="/image.jpg" id='bg'>

服务器端python代码：

 @app.route('/image.jpg')
    def image_jpeg():
        image = StringIO()
        plot(image)
        image.seek(0)
        return send_file(image,
                         attachment_filename="image.jpg",
                         as_attachment=True)

def plot(image):
    x = np.linspace(0, 100)
    y = np.sin(x)
    pyplot.plot(x, y)
    pyplot.savefig(image, format='jpg')

以上工作正常，当我加载页面时我得到了一条静态曲线。但我希望每次用户向服务器提交输入以求解方程时，此图都会发生变化。

如何从同一个 AJAX 调用同时调用 solve() 和 image_jpeg()？

如何跨函数共享用户数据 [a , b ,c] 以便生成图表并将其发回。

更新：

$('img').attr('src',"data:image/png;base64"+ "," + data.imgdata);

在服务器上：

    imgdata = image.getvalue()    
import base64
imgdata = base64.b64encode(imgdata)

imgData 与 json 一起传递。

Answer 1

不幸的是，一个请求不能变成两个，但是有一种方法可以满足您的需求。

为了实现这一点，您可以将图像作为 data url 发送到您从服务器请求的 JSON 中，然后在 JS 中您只需设置图像元素的 src 属性数据.

您可以首先将 image_jpeg 函数移动到您的求解方法中，因为您已经将图像数据存储在字符串中，您需要做的就是对其进行编码转换为 base64 并在其前面加上 "data:image/png;base64," 更改 mime 以适应图像格式。

此外，为了完成答案，您可以跨功能共享用户数据。你通常会使用 Cookies，在 Flask 中，他们将 cookies 包装在 Sessions 中，使你更容易，take a look。话虽如此，我认为他们不适合这个问题。

Answer 2

简单的方法是将客户端更改为仅显式加载图像，传递与传递给 solve API.

相同的参数

另一种选择是将图像内容作为另一个值从 solve 传回。然后，您的客户端代码可以在其 src.

中构建一个带有 data: 的 img

最后，您可以使用 session 来存储来自同一客户端的调用之间的信息，因此每次有人调用 solve 时，您将他们的参数存储为 "last_solve_args"，然后您可以在 image 中使用它们。（当然，客户端还是要重新加载图片，所以这个确实比第一个好不了多少。）

Python 中的方程求解器 webapp

Equation solver webapp in Python

python

ajax

matplotlib