本文向您展示如何设置 Flask Web 应用程序,将 JSON 对象加载到 HTML 表中。 它还通过向 Flask 端点(endpoint)发出 AJAX POST 请求来重新创建表的内容。

1、快速安装

对于希望尽快看到结果的每个人,请按照以下步骤在本地运行项目。

   git pull [https://github.com/joseph-dougal/flask-ajax-table.git](https://github.com/joseph-dougal/flask-ajax-table.git)   cd    pip install flask   python app.py

2、一步一步做

如果您不想下载 github 上的repo,您可以在下面的项目结构中手动创建文件夹/文件并复制/粘贴代码。

3、概述

当您运行 Flask Web 应用程序并在浏览器中转到 http://127.0.0.1:5000/ 时,@app.route('/') 会呈现 index.html 页面内容。 我们将第一个 JSON 对象“data_set_1”传递给 Jinja2模板中的变量“data”。 在 index.html 中,我们使用 Jinja2 表达式创建一个 for 循环并迭代 JSON 对象以构建表。

4、项目结构

Flask 中使用 AJAX 异步加载 Bootstrap 表格(Tables)

4.1 Python 部分

app.py

from flask import Flask, render_template, jsonify, request  import pandas as pd  import json  import os    app = Flask(__name__)    app.config['JSON_SORT_KEYS'] = False    project_dir = os.path.dirname(os.path.abspath(__file__))  my_files = r'/static/data/'  file_dir = project_dir + my_files      @app.route('/')  def index():        json_file = file_dir + r'data_set_1.json'        with open(json_file) as f:          js_object = json.load(f)          df = pd.read_json(json.dumps(js_object))          return render_template('index.html', data=df)      @app.route('/get_data', methods=['POST'])  def get_data_function():        user = request.form['user']        if user == 'two':            json_file = file_dir + r'data_set_2.json'            with open(json_file) as f:              js_object = json.load(f)              return jsonify(js_object)        else:          json_file = file_dir + r'data_set_1.json'            with open(json_file) as f:              js_object = json.load(f)              return jsonify(js_object)      if __name__ == '__main__':      app.run(debug=True)

4.2 HTML 部分

index.html

                  AJAX Example                                            

[Example]

{% for col in data.columns %} {% endfor %} {% for key, value in data.iterrows() %} {% for k in value %} {% endfor %} {% endfor %}
{{ col }}
{{ k }}

4.3 Styling 部分

main.css

table {      table-layout: responsive-sm;  }    thead th {      background-color: #FFA500;      color: white;  }    td {      white-space: normal !important;      word-wrap: break-word;  }    .fixed-button-size {      width: 100px !important  }

4.4 JSON 部分

data_set_1.json

[{    "name": "John Doe",    "position": "Sales",    "salary": "$100,000",    "start_date": "2015",    "office": "New York",    "extn": "5421"  },  {    "name": "Larry Doe",    "position": "Trader",    "salary": "$100,000",    "start_date": "2018",    "office": "Tokyo",    "extn": "2154"  }]

data_set_2.json

[{    "name": "Joe Doe",    "position": "Technology",    "salary": "$100,000",    "start_date": "2015",    "office": "Miami",    "extn": "4512"  },  {    "name": "Ashley Doe",    "position": "Fashion",    "salary": "$100,000",    "start_date": "2015",    "office": "Alaska",    "extn": "1245"  }]

如果没有错误发生,您将在浏览器中看到:

Flask 中使用 AJAX 异步加载 Bootstrap 表格(Tables)

4.5、AJAX 部分

为了更新 DOM 中的元素,我们使用 AJAX 异步调用我们的 flask 端点(endpoint) @app.route(‘/get_data’, methods=[‘POST’]) 以获取新的 JSON 对象。

ajax_table_example.js

$(document).ready(function(){      $('#ajax_data_load').click(function(){          clicked = $(this).attr('name');          $.ajax({              url: '/get_data',              dataSrc: 'data',              type: 'POST',              dataType: 'json',              data: $('form').serialize(),              success: function(data){                  console.log('Success Hit');                  console.log(data);                  $('#jds-example').html('');                    var column_data = '';                  column_data += '';                    for (var key in data[0]){                      column_data += '' + key + ''                  };                    column_data += '';                  $('#jds-example').append(column_data),                  $('th').css({'background-color':'#FFA500', 'color': 'white'});                    var row_data = '';                  for (var arr in data){                      var obj = data[arr];                      row_data += '';                      for (var key in obj){                          var value = obj[key];                          row_data += '' + value + '';                      };                      row_data += ''                  };                  $('#jds-example').append(row_data);                    },              error: function(data){                  console.log('Error Hit');                  console.log(data);                  }          });      });  });

如果没有错误发生,您将在浏览器中看到:

Flask 中使用 AJAX 异步加载 Bootstrap 表格(Tables)

您还可以在浏览器中检查应用程序,并查看我们写入控制台的消息“成功点击”以及从我们的 flask 端点(endpoint) 加载的对象,内容如下:

Flask 中使用 AJAX 异步加载 Bootstrap 表格(Tables)

翻译自:https://joseph-dougal.medium.com/flask-ajax-bootstrap-tables-9036410cbc8

0
上一篇
2021-11-13

一套excel动画教程,附490个函数公式实例

下一篇
2021-11-13

手Q打开链接进入活动 下拉页面去完成简单任务