如何在 Flask 中渲染同一页面时显示 bootstrap 模态

Question

我使用 flask 和 bootstrap 创建了一个网络应用程序。在此应用程序中，在输入并单击提交按钮后，我想以 bootstrap 模式在同一页面中显示输出或结果。但我无法正确重定向它。如果有任何解决方案，请告诉我。这将非常有帮助。提前致谢。代码如下。

home.html

 <div class="container" align="left">
  <div class="panel panel-default" style="border:none;border-radius: 10px;">
    <div class="panel-body panel1">
        <form method="POST" action="/predict">
            <div class="row">
                <div class="col-sm-6"> 
                    <div class="form-group d2">
                        <label for="NewYork"><p class="p2">New York</p></label>
                        <input type="text" class="i1" name="NewYork"><br><br>
                        <small id="NYHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
                    </div>
                    <div class="form-group d2">
                        <label for="california"><p class="p2">California</p></label>
                        <input type="text" class="i1" name="California"><br><br>
                        <small id="CaliforniaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
                    </div>
                    <div class="form-group d2">
                        <label for="Florida"><p class="p2">Florida</p></label>
                        <input type="text" class="i1" name="Florida"><br><br>
                        <small id="FloridaHelp" class="form-text text-muted s1">Enter 1 if the state selected is New York else enter 0</small>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group d2">
                        <label for="RnD_Spend"><p class="p2">RnD_Spend</p></label>
                        <input type="text" class="i1" name="RnD_Spend"><br><br>
                        <small id="RndSpendHelp" class="form-text text-muted s1">Enter RnD Spendings in US Dollar</small>
                    </div>
                    <div class="form-group d2">
                        <label for="Admin_Spend"><p class="p2">Admin_Spend</p></label>
                        <input type="text" class="i1" name="Admin_Spend"><br><br>
                        <small id="AdminSpendHelp" class="form-text text-muted s1">Enter Adminstration Spendings in US Dollar</small>
                    </div>
                    <div class="form-group d2">
                        <label for="Market_Spend"><p class="p2">Market_Spend</p></label>
                        <input type="text" class="i1" name="Market_Spend"><br><br>
                        <small id="MarketSpendHelp" class="form-text text-muted s1">Enter Market Spendings in US Dollar</small>
                    </div>
                </div>
            </div>
            <div class="row" align="right"><input class="btn btn1" type= "submit" value="Submit" data-toggle="modal" data-target="#myModal"></div>
        </form>
    </div>
 </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">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">
    ...
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

app.py

 @app.route("/predict",methods=['GET', 'POST'])
 def predict():
   NewYork = float(request.form['NewYork'])
   California = float(request.form['California'])
   Florida = float(request.form['Florida'])
   RnD_Spend= float(request.form['RnD_Spend'])
   Admin_Spend= float(request.form['Admin_Spend'])
   Market_Spend = float(request.form['Market_Spend'])
   pred_args =[NewYork, California, Florida, RnD_Spend, Admin_Spend, Market_Spend]
   pred_args_arr = np.array(pred_args)
   pred_args_arr = pred_args_arr.reshape(1, -1)
   mul_reg = open("multiple_linear_model.pkl", "rb")
   ml_model = joblib.load(mul_reg)
   model_prediction = ml_model.predict(pred_args_arr)
   model_prediction = round(float(model_prediction), 2)
   return render_template('home.html', prediction = model_prediction)

Answer 1

我想说的是，在提交表单后将用户重定向到同一页面但显示模式通常不是一个好的做法（这不是一个好的用户体验），我建议通过使用 AJAX.

无论如何，您可以传递一个标志，告诉 HTML 模板渲染器是否需要显示模式。像这样：

return render_template(
  'home.html',
  prediction=model_prediction,
  show_predictions_modal=True  // This is our flag
)

然后有条件地在模板中渲染模态框：

{% if show_predictions_modal %}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">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">
    ...
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>
{% endif %}

如何在 Flask 中渲染同一页面时显示 bootstrap 模态

how to show bootstrap modal on rendering the same page in flask

python

flask

bootstrap-modal

render

url-redirection