bootstrap静态框，调后端接口结果展示

背景：

点击按钮，弹框并调用后端接口，将结果返回在页面上

如图：1.

.

2.

 代码如下：

html：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                     aria-labelledby="exampleModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>结果</th>
                                        <th>明细</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody_tr">

                                    </tbody>
                                </table>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

js：

#js路径根据实际中的填写
<script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript">
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var modal = $(this)
            $.ajax({
                type: "get",
                dataType: "json",
                url: "/test2",//url
                data: {id:recipient},
                  success : function(data) {
                          var html = [];
                          for(var i=0;i<data.length;i++){
                                  html.push("<tr>");
                                   html.push("<td >"+data[i].test1+"</td>");
                                   html.push("<td>"+data[i].test_status+"</td>")
                                   html.push("<td >"+data[i].test2+"</td>");
                                   html.push("</br></br>");

                                   }
                                   html.push("</tr>");

                         $("#tbody_tr").html(html);
                      }

             });})

    </script>

后端python（flask）：

@app.route('/test2',methods=['GET','POST'])
def test2():
    id = request.args.get('id')
    table_name = TableName()
    sql_text = 'id={id}'.format(id=id)
    res = table_name.query.filter(text(sql_text)).all()
    data = [i.to_json() for i in res] #转成字典
    return jsonify(data)

参考博客：

https://blog.csdn.net/u010734213/article/details/82775224

https://blog.csdn.net/WuLex/article/details/85258327