javascript - 将变量从js代码传递到db中的flask或类似的东西

Question

我对英语、Python 和 Flask 都是全新的，如果我写的东西很糟糕，我很抱歉。

我有以下任务:当用户访问pfofile.html时，页面会加载数据库中的值。 如果用户更改颜色，则启动 JavaScript 函数(调用 onchange())。 我必须编写更改数据库中的字段 text_color_in_chat 的代码。 我以为我做得很好，但出现以下错误:jinja2.exceptions.UndefinedError:'t'未定义。 我不明白如何使用 Flask 将“t”变量从 JavaScript 传递到 Python，也不明白如何正确调用大括号{{}}。

<script type="text/javascript" charset="utf-8">
function change_color(t) {
    alert( {{ current_user.change_color_in_db(t.value) }} );
}
</script>
<div>
    Check your color in chat:
    <input type="color" value="{{ user.text_color_in_chat }}" onchange="change_color(this);">
</div>

这是我的 models.py 的一部分:

...
text_color_in_chat = db.Column(db.String(8), default='#000000')
...
def change_color_in_db(self, new_color):
        # re.search(r'^#[0-9a-f]{6,6}$', "#000000"
        self.text_color_in_chat = new_color
        db.session.add(self)
        return True
...

在我的 Python 函数中，我正在使用正则表达式测试变量 new_color。如果不匹配，则返回 None，否则返回该对象。而且，我不明白如何使用 if 条件。

Answer 1

让我们看看并了解客户端/服务器应用程序的工作方式:

从用户的浏览器:

1. 用户在表单中输入一个值；
2. 用户提交表单；
3. 表单数据被发送到服务器并等待响应。

在服务器上:

1. 服务器获取 HTTP 请求并对其进行解码；
2. URL 被转换为“路由”；
3. 服务器调用附加到路由的函数或方法；
4. 该函数完成其工作，并且必须返回 HTTP 响应(数据 + 状态代码)；
5. 响应(通常是 HTML 页面)被发送回浏览器。

在用户的浏览器上:

1. 浏览器呈现 HTML 页面(或其他类型的数据)；
2. 然后用户可以继续浏览。

...循环完成。

从用户的浏览器:

您想要的是一种将用户更改注册到数据库的方法。

为此，您可以使用经典的 HTML 表单或 Ajax 请求。由于您使用的是 JavaScript，因此 Ajax 请求是实现此目的的最佳方法。例如，您可以使用 jQuery.post为此:

这是草稿:

<script type="text/javascript" charset="utf-8">
function change_color(t) {
    var url = "/route/to/change_color";
    var data = {color: $('#chat-color').val()};
    $.post(url, data);
}
</script>

此代码获取id为#chat-c​​olor的input字段的值，并将其发布到URL“/route/到/change_color”。

当然，您需要像这样更改 HTML 表单以添加 #chat-c​​olor id:

<div>
    Check your color in chat:
    <input id="chat-color" type="color" value="{{ user.text_color_in_chat }}" onchange="change_color(this);">
</div>

在服务器上:

您需要为路由“/route/to/change_color”定义一个函数。

该函数可以是:

import re
from flask import request

@app.route('/route/to/change_color', methods=['POST'])
def change_color():
    new_color = request.form['color']
    if re.match(r'^#[0-9a-f]{6,6}$', new_color):
        self.text_color_in_chat = new_color
        db.session.add(self)
        ...
    ...

这是一个使用全局变量而不是数据库的小解决方案(为了简单起见):

# coding: utf8
import json
import re
import textwrap

from flask import Flask
from flask import request

app = Flask(__name__)

text_color_in_chat = "#000000"


@app.route('/')
def hello_world():
    content = textwrap.dedent("""\
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    function change_color(t) {
        var url = "/route/to/change_color";
        var data = {color: $('#chat-color').val()};
        $.post(url, data);
    }
    </script>
    <div>
        Check your color in chat:
        <input id="chat-color" type="color" value="<color>" onchange="change_color(this);">
    </div>
    """)
    return content.replace("<color>", text_color_in_chat)


@app.route('/route/to/change_color', methods=['POST'])
def change_color():
    new_color = request.form['color']
    if re.match(r'^#[0-9a-f]{6,6}$', new_color):
        global text_color_in_chat
        text_color_in_chat = new_color
        return json.dumps({'change_color': "OK"})
    return json.dumps({'change_color': "Invalid color"})


if __name__ == '__main__':
    app.run(debug=True)