從js代碼傳遞變量到db中的瓶子或類似的東西

Question

我是英語，Python和Flask的全新產品，如果我編寫非常糟糕的東西，我很抱歉。

我有以下任務：當用戶轉到pfofile.html時，頁面將加載一個來自數據庫的值。 如果用戶更改顏色，則啓動JavaScript功能（調用onchange()）。 我必須編寫更改數據庫中的字段text_color_in_chat的代碼。 我以爲我做得很好，但我有以下錯誤：jinja2.exceptions.UndefinedError: 't' is undefined。 我不明白我如何通過使用Flask將JavaScript中的「t」變量傳遞給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> 

此代碼得到input字段，ID是#chat-color的值，並將其發佈到URL「/路徑/到/ change_color」。

當然，你需要個改變這樣的HTML表單添加#chat-colorID：

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

在服務器上：

您需要定義一個函數的路徑「/路由/到/ 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)