Flask结合jQuery实现SQLAlchemy数据表格无页面刷新的问题求解

你代码存在以下5个核心错误，按优先级排列：

• 请求类型不匹配：前端用的$.getJSON是GET请求，但是你的/wallet_refresh路由只允许POST方法，还额外判断了request.method == "POST"，请求会直接被405拒绝，不会进入业务逻辑。
• 响应格式不匹配：$.getJSON要求后端必须返回合法JSON格式，你后端返回的是HTML文本，请求会解析失败，不会进入成功回调。
• 返回内容错误：后端接口返回的是完整的portfolio.html页面，不是表格的片段内容，就算请求成功，把整个页面塞到表格容器里也会完全错乱。
• DOM选择器失效：你的表格标签只有class属性，没有设置id="table"，jQuery的$("#table")选择器找不到目标元素，拿到数据也没有地方渲染。
• HTML结构错误：刷新按钮区域嵌套了两个未闭合的form标签，属于无效DOM结构，可能导致点击事件绑定失效。

修复步骤 #

1. 拆分表格为独立模板 #

新建_wallet_table.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>

原来的portfolio.html中表格的位置替换成引用：

<div id="wallet_table_container">
  {% include '_wallet_table.html' %}
</div>

2. 修复后端接口 #

修改/wallet_refresh路由，支持GET请求，只返回表格片段：

@portfolioPath.route('/wallet_refresh')
def wallet_refresh():
    all_data = HoldingsTable.query.all()
    # 仅渲染表格片段，不返回完整页面
    return render_template("_wallet_table.html", all_data_html = all_data)

3. 修复jQuery逻辑 #

改用$.get获取HTML内容，绑定正确的渲染容器：

<script type="text/javascript">
  $(function() {
    $('a#wallet_refresh_id').on('click', function(e) {
      e.preventDefault();
      $.get('/wallet_refresh', function(table_html) {
        $("#wallet_table_container").html(table_html);
      });
      return false;
    });
  });
</script>

4. 修复按钮HTML结构 #

去掉无效嵌套的form标签，修正href属性：

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

内容的提问来源于stack exchange，提问作者HumanBot