bootstrap靜態框，調后端接口結果展示

本文轉載自查看原文 2020-02-08 15:28 884 python/ js/ html/ flask

背景：

點擊按鈕，彈框並調用后端接口，將結果返回在頁面上

如圖：1.

代碼如下：

html：

 1 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
 2                                      aria-labelledby="exampleModalLabel">
 3                                     <div class="modal-dialog" role="document">
 4                                         <div class="modal-content">
 5                                             <div class="modal-header">
 6                                                 <button type="button" class="close" data-dismiss="modal"
 7                                                         aria-label="Close"><span aria-hidden="true">&times;</span>
 8                                                 </button>
 9                                             </div>
10                                             <div class="modal-body">
11                                                 <table class="table table-bordered">
12                                     <thead>
13                                     <tr>
14                                         <th>標題</th>
15                                         <th>結果</th>
16                                         <th>明細</th>
17                                     </tr>
18                                     </thead>
19                                     <tbody id="tbody_tr">
20 
21                                     </tbody>
22                                 </table>
23                                             </div>
24                                             <div class="modal-footer">
25                                                 <button type="button" class="btn btn-default" data-dismiss="modal">關閉
26                                                 </button>
27                                             </div>
28                                         </div>
29                                     </div>
30                                 </div>

js：

 1 #js路徑根據實際中的填寫
 2 <script type="text/javascript" src="static/js/jquery.min.js"></script>
 3     <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
 4     <script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
 5 <script type="text/javascript">
 6         $('#exampleModal').on('show.bs.modal', function (event) {
 7             var button = $(event.relatedTarget)
 8             var recipient = button.data('whatever')
 9             var modal = $(this)
10             $.ajax({
11                 type: "get",
12                 dataType: "json",
13                 url: "/test2",//url
14                 data: {id:recipient},
15                   success : function(data) {
16                           var html = [];
17                           for(var i=0;i<data.length;i++){
18                                   html.push("<tr>");
19                                    html.push("<td >"+data[i].test1+"</td>");
20                                    html.push("<td>"+data[i].test_status+"</td>")
21                                    html.push("<td >"+data[i].test2+"</td>");
22                                    html.push("</br></br>");
23 
24                                    }
25                                    html.push("</tr>");
26 
27                          $("#tbody_tr").html(html);
28                       }
29 
30              });})
31 
32     </script>

后端python（flask）：

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

參考博客：

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

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 從零到一：后端接口文檔后端接口書寫前后端接口規范前后端分離的時代，如何解決前后端接口聯調問題? 深入淺出：了解前后端分離優勢、前后端接口聯調以及優化問題深入淺出：了解前后端分離優勢、前后端接口聯調以及優化問題前后端不分離到分離演變,優勢,前后端接口聯調,排錯及優化前后端接口對接匯總 Springboot后端接口開發后端接口都測試什么？要怎么測？