Question

我使用此 Flask 代码手动显示 SQLAlchemy 数据：

@portfolioPath.route('/portfolio', methods=['GET','POST'])
def portfolio():
    if request.method == 'POST':
        all_data = HoldingsTable.query.all()
        return render_template("portfolio.html", all_data_html = all_data)

在这个显示查询数据的动态 HTML 表格中：

<!-- Equity Holdings Overview Table -->
<table class="table table-hover table-striped table-sm">
  <tr>
    <th>ID</th>
    <th>Trade Date</th>
    <th>Name</th>
    <th>Symbol</th>
    <th>Shares</th>
    <th>Purchase Price</th>
  </tr>
  {% for row in all_data_html %}
  <tr>
    <td>{{row.id}}</td>
    <td>{{row.date_purchase}}</td>      
    <td>{{row.name}}</td>
    <td>{{row.ticker}}</td>
    <td>{{row.shares}}</td>
    <td> &#x24; {{row.price_purchase}}</td>
  </tr>
  {% endfor %}
</table>

有了这个刷新按钮，可以手动显示或刷新数据表，但不便之处在于它会用它重新加载整个页面：

<form action="{{url_for('core.portfolio')}}" method="POST">
  <div class="form-group">
      <div class="row align-items-start">
        <div class="col-md-2 col align-self-end">
          <button class="btn btn-primary float-end" type="submit" style="margin:5px;">1. Refresh!</button>             
        </div>
    </div>
  </div>
</form>

因此，我尝试添加 Ajax/jQuery 来加载表中的数据，而无需每次都重新加载整体。所以，我在相同的文件中用这个小代码进行了测试：

  <h3>What's 1 + 1?</h3>
  <form>
    <input type=text size=5 name=proglang>
    <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
  </form>
<p id=result></p>

当然，python函数如下：

@portfolioPath.route('/background_process')
def background_process():
    try:
        lang = request.args.get('proglang', 0, type=str)
        if lang.lower() == '2':
            return jsonify(result='You are wise')
        else:
            return jsonify(result='Really?')
    except Exception as e:
        return str(e)

jQuery 脚本如下所示：

<script type=text/javascript>
  $(function() {
    $('a#process_input').bind('click', function() {
    $.getJSON('/background_process', {
      proglang: $('input[name="proglang"]').val(),
    }, function(data) {
      $("#result").text(data.result);
    });
    return false;
    });
  });
</script>

所以，我确实尝试更改脚本以重新加载表格：

<script type=text/javascript>
  $(function() {
    $('a#wallet_refresh_id').bind('click', function() {
    $.getJSON('/wallet_refresh', function(all_data_html) {
      $("#table").html(all_data_html);
    });
    return false;
    });
  });
</script>

带有链接的flask后端部分：

@portfolioPath.route('/wallet_refresh', methods=['POST'])
def wallet_refresh():
    if request.method == "POST":
        all_data = HoldingsTable.query.all()
        return render_template("portfolio.html",
                                all_data_html = all_data
                                )
    return render_template("portfolio.html")

和一个新的提交按钮：

<form id="wallet_table_form">
<h3>REFRESH THE DATABASE</h3>
<form>
  <a href=wallet_refresh id=wallet_refresh_id><button class='btn btn-default'>Submit</button></a>
</form>

但很明显，我把事情混在这里是因为什么都没发生，请问有什么问题吗？

Answer 1

你必须做太多的修复才能让它工作。

在 html 中，如果您使用 ajax，则不需要表单标签。
您不需要使用锚标记。您可以使用按钮并在其上使用点击事件。
我不知道哪个元素的 ID 为 table。为了更新你需要的数据，你需要给表中的 tr 标签提供 id。并使用 js 对其进行操作。

<h3>REFRESH THE DATABASE</h3>
<button id="wallet_refresh_id" class='btn btn-default'>Submit</button>
<table class="table table-hover table-striped table-sm">
<thead>
<tr>[your headings]</tr>
</thead>
<tbody>
<tr id="data_holder"></tr>
</tbody>
</table>

在 javascript 中，您现在不需要返回 false 并且可以使用 #wallet_refresh_id 并使用 for 循环。

$('#wallet_refresh_id').bind('click', function() {
  $.getJSON('/wallet_refresh', function(all_data_html) {
     for (var i of all_data_html.data ){ // using .data, we will return json in flask 
     $("#data_holder").append(`<td>${i.id}</td><td>${i.date_purchase}</td><td>${i.name}</td>`[...so on write the other])
     } 
  });
});

在python代码中，你应该使用get方法而不是post，因为你在ajax中使用get。并且您只需要返回数据而不是渲染的模板。您需要使用 json.dumps。

@portfolioPath.route('/wallet_refresh', methods=['GET'])
def wallet_refresh():
    if request.method == "GET":
        all_data = HoldingsTable.query.all()
        return json.dumps({"data":all_data })
                                
    return render_template("portfolio.html")

Answer 2

让它工作谢谢！必须为它创建一条新路线

刷新数据表而不重新加载页面

2 个答案: