如何將 javascript 變量傳遞給 WTForm？ 蟒蛇/燒瓶

Question

我正在使用 Python 和 Flask 創建一個數據輸入/計時 Web 應用程序。 當用戶進入日志頁面時，他們輸入任務的“會話 ID”，表單提交時間和用戶 ID 也會自動輸入到數據庫中。

現在我正在嘗試使用 Javascript 來記錄頁面加載任務的時間，這樣我就有了開始時間和結束時間。 我首先嘗試通過 AJAX 將 javascript 變量發布到后端，但我似乎無法讓它工作。 現在我試圖讓 javascript 變量與會話 ID 一起作為“HiddenField”的一部分發送。 我還沒有配置頁面加載時間腳本，我只是想讓 Javascript 與 WTForms 對話以與我的數據庫提交對話。 這是我目前的代碼：

視圖.py

@app.route('/logpage', methods=['GET', 'POST'])
@login_required
def logpage():
    form = LogForm()

    if form.validate_on_submit():
        timer = request.get_data("timer")
        entry = LogData(sessionid=form.sessionid.data, user_id=current_user.get_id(), starttime=form.testvar.data, endtime=datetime.utcnow())
        db.session.add(entry)
        db.session.commit()

        return redirect(url_for('home'))

    return render_template('logpage.html', form=form)

模型.py

class LogForm(FlaskForm):
    sessionid = StringField('sessionid', validators=[InputRequired(), Length(min=16, max=16)])
    testvar = HiddenField('testvar')

日志頁面.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Active Log Page{% endblock %}
{% block head %}
    <!-- Custom styles for this template -->
    <link href="static/css/starter-template.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
    <script src="static/js/timer.js?version=25"></script>
{% endblock %}

{% block body %}

    <div class="container">

    <div class="form-group">
    <form class="form-logpage", method="POST" action="/logpage", id="jsinput">
      {{ form.hidden_tag() }}
      {{ wtf.form_field(form.sessionid) }}
      <div id="jsinput">
      {{ wtf.form_field(form.testvar) }}
      </div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Finish Job</button>
</form>
  </div>
</div>
{% endblock %}

計時器.js

var myData = "dataVariable";
document.getElementById("jsinput").value = "myData";

如您所見，我嘗試使用 document.getElementById 將變量放在 logpage.html 中，但是當我點擊提交時，開始時間字段為空。 我查看了文檔以尋找將變量放入 WTForm 的方法，但找不到任何相關內容。

之前，在其他一些問題中，它顯示為 null 和 /x 和 ''b，但從那時起我做了很多修改，數據庫條目只是 ''。

如果有更優雅的方法來記錄頁面加載日期時間並與其余數據同時記錄到數據庫中，我很想聽聽建議。 以前的 SO 帖子： Python/Flask：如何判斷用戶在頁面上花費了多長時間？ （數據輸入/時間日志應用程序）

Answer 1

這是我為這個問題提出的解決方案：

1. 使用 id 向表單添加隱藏字段。
2. 獲取腳本中的 ID 並為其分配一個值。

在你的 form.py 中：

from flask_wtf import FlaskForm
from wtforms import SubmitField
from wtforms import HiddenField

class MyForm(FlaskForm):
    
    my_data = HiddenField(
        'my_data',
        render_kw={'id':'my_data'}
    )
    
    save = SubmitField(
        'Save',
        render_kw={'id':'save'}
    )

在視圖中創建並傳遞表單，然后使用{{ form.save }}和{{ form.my_data }}在 html 模板中呈現 save 和 my_data 字段

將以下內容添加到您的 javascript 中：

var saveButton = document.getElementById('save');

saveButton.addEventListener('click', function() {
    document.getElementById('my_data').value = 'MY DATA IS HERE!!';
});

您現在可以使用以下命令在您的 python 視圖中訪問您的數據：

from flask import request

...some code...

request.form['my_data']

這是一個遲到的答案，但希望對那里的人有用......