如何检测哪个更新按钮是用mongoDB点击的

Question

我需要开发后端系统，并使用(第一次)水瓶和mongodb作为数据库.基本上，我需要一个动态表在一个网页上，“添加”按钮，以添加数据到表和“更新”按钮的每一行数据。到目前为止，在访问页面并向表和数据库中添加新数据时，我已经设法从数据库加载数据(用于表)。但是我无法在每一行中实现“更新”按钮，因为我不知道如何检测在表中单击了哪个按钮。我试图通过按钮值获得它，该值被分配给资格ID (表中的任何行)。下面是表，我使用引导模式(里面有"html表单“)来添加和更新

<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捕捉表中“右”更新按钮的建议。

Answer 1

我是通过将ID值赋值给隐藏输入来完成的。

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

并从烧瓶中索取数据，并在mongodb上更新。