Question

我已经使用flask和bootstrap创建了一个Web应用程序。在此应用程序中，放置输入并单击提交按钮后，我要在引导模态的同一页面中显示输出或结果。但是我无法正确重定向。

app.py

@app.route("/action_distance", methods=['POST', 'GET'])
def action_distance():
    message = "Distance"
    if request.method == 'POST':
        key_1 = request.values.get("key_1")
        print("key_1 = ", key_1)
        key_2 = request.values.get("key_2")
        print("key_2 = ", key_2)
        x1, y1, z1 = get_coordinates(key_1)
        x2, y2, z2 = get_coordinates(key_2)
        object_one = Coordinates(x1, y1, z1)
        object_two = Coordinates(x2, y2, z2)
        distance = distance_math(object_one, object_two)
        distance = round(float(distance), 2)
        print("distance = ", distance)
        return render_template("distance.html",
                               msg=message,
                               distances=distance,
                               show_modal=True)

我从字面上将distances传递到html文件。 distance.html

    <form method="POST" action="/action_distance">
                <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
                <select name="key_1" class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option selected>Choose...</option>
                    {% for row in rows_1 %}
                        <option Value="{{row}}" name="key_1">{{row}}</option>
                    {% endfor %}
                </select>
                <select name="key_2" class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option selected>Choose...</option>
                    {% for row in rows_2 %}
                        <option Value="{{row}}" >{{row}}</option>
                    {% endfor %}
                </select>
            <button type="submit" class="btn btn-primary my-1">Submit</button>
        </form>
    {% if show_modal == True %}
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span></button>
    </div>
    <div class="modal-body">
       <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
     </div>
   </div>
  </div>
</div>
{% endif %}

但是，单击按钮后，模态引导程序不会出现。但是当我尝试以下操作时：

{% if show_modal ==True %}
        <p>distance is : {{ distances }}</p>
{% endif %}

它确实显示了传递的值。

无法在烧瓶上显示引导程序模态

0 个答案: