如何检测用 Flask 单击了哪个更新按钮 python(mongoDB)

Question

我需要开发后端系统并使用（第一次）Flask 和 mongodb 数据库。基本上，我需要在带有 "add" 按钮的网页中使用动态 table 将数据添加到每行数据的 table 和 "update" 按钮。到目前为止，我已经设法在访问页面后从数据库加载数据（table）并将新数据添加到 table 和数据库。但是我无法在每一行中实现 "update" 按钮，因为我不知道如何检测在 table 中单击了哪个按钮。我试图通过分配给资格 ID 的按钮值（table 中的任何行）来获取它。下面是 table，我使用 bootstrap 模态（里面有 "html form"）来添加和更新

<table class="table table-condensed">
    <thead>
    <tr>
        <th>Qualification</th>
        <th>Calculation of overall result</th>
        <th>Minimum Score</th>
        <th>Maximum Score</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    {% for qual in qualifications %}
    <tr>
        <td>{{ qual.qualificationName }}</td>
        <td>{{ qual.calculation }}</td>
        <td>{{ qual.minimumScore }}</td>
        <td>{{ qual.maximumScore }}</td>
        <td>
            <!-- Button trigger modal -->
            <form method="post" action="">
                <<button type="submit" class="btn btn-danger" data-toggle="modal" data-target="#updateModalCenter"
                        name="updateBtn" value="{{ qual._id }}">Update
                </button>
            </form>
            <!-- Modal -->
            <div class="modal fade" id="updateModalCenter" tabindex="-1" role="dialog" aria-labelledby="updateModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateModalLongTitle">Update Qualification</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{setupQual/qual._id}}">
                                <div class="form-group">
                                    <label>Qualification Name</label>
                                    <input type="text" class="form-control" name="qualNameUpdate">
                                </div>
                                <div class="form-group">
                                    <label>Calculation of result by average of how many subjects: </label>
                                    <select multiple class="form-control" name="calculationUpdate">
                                        <option>1 subject</option>
                                        <option>2 subjects</option>
                                        <option>3 subjects</option>
                                        <option>4 subjects</option>
                                        <option>5 subjects</option>
                                        <option>6 subjects</option>
                                        <option>7 subjects</option>
                                        <option>8 subjects</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Minimum Score</label>
                                    <input type="number" class="form-control" name="minScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                                <div class="form-group">
                                    <label>Maximum Score</label>
                                    <input type="number" class="form-control" name="maxScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <input type="submit" class="btn btn-primary" value="Save">
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

添加

的后端代码

@app.route("/setupQual/add", methods = ['POST'])   #addding to db from modal
def addQualification():

qualName = request.form['qualName']
calc = request.form['calculation']
minScore = request.form['minScore']
maxScore = request.form['maxScore']

addToDB = {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
db.qualifications.insert_one(addToDB)
return redirect(url_for('setupQual'))

我尝试了很多方法都没有成功，最后更新的代码是这样的：

@app.route("/setupQual/<string: _id>" , methods = ['GET', 'POST']) #loading 
from db for modal updating
def loadQualToUpdate():
updateBtnId = request.form['updateBtn']
qualUpdate = "myUni"#delete later, only for testing
updateQualifications = db.qualifications.findOne({
    "_id": updateBtnId
})
qualName = request.form['qualNameUpdate']
calc = request.form['calculationUpdate']
minScore = request.form['minScoreUpdate']
maxScore = request.form['maxScoreUpdate']

updateDB = {
    "$set": {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
}
db.qualifications.updateOne(updateQualifications, updateDB)
return redirect(url_for('setupQual'))

显然，单击 "update" 按钮时不应重新加载页面。因此，关于使用 Flask python.

在 table 中捕获 "right" 更新按钮的任何建议

Answer 1

我通过将 ID 值分配给隐藏输入来做到这一点

<input type="hidden" name="id" value="{{ qual._id }}" />

并从 flask 请求并通过 id 找到数据并在 mongodb

上更新

如何检测用 Flask 单击了哪个更新按钮 python(mongoDB)

how to detect which update button was clicked with Flask python(mongoDB)

html

mongodb

flask

web-development-server

httpbackend