Python2.7下Flask实现PostgreSQL搜索并仅渲染结果表格的问询

嘿，我来帮你搞定这个搜索栏+局部表格更新的需求，用Python2.7的话咱们可以这么搞：

核心是用AJAX异步请求传递用户输入，后端只返回表格的HTML片段，前端替换现有表格区域，不用刷新整个页面。咱们用Flask作为Web框架（Python2.7支持Flask 0.12.x版本），psycopg2连接PostgreSQL。

首先把你现有模板里的表格部分拆成独立子模板，比如叫_person_table.html，这样后端可以单独渲染它返回。

假设你原模板里的表格是这样的，把它抽出来：

<!-- _person_table.html -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
      <!-- 其他列根据你的需求添加 -->
    </tr>
  </thead>
  <tbody>
    {% for person in persons %}
    <tr>
      <td>{{ person.id }}</td>
      <td>{{ person.name }}</td>
      <td>{{ person.email }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

然后修改edit_person.html，完善搜索表单并引入子模板：

{% extends "layouts/layout_logged.html"%} 
{% block body%} 
<a href="/macro_test" class="btn btn-danger btn-sm my-2 my-sm-0" type="submit">TEST</a> 

<!-- 搜索表单 -->
<form id="search-form" class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" id="search-input" placeholder="输入关键词搜索..." aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>

<!-- 表格容器，用来替换内容 -->
<div id="table-container">
  {% include "_person_table.html" %}
</div>

<!-- AJAX脚本 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <!-- 适配Python2.7的稳定jQuery版本 -->
<script>
$(document).ready(function() {
  $('#search-form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交刷新页面
    var searchQuery = $('#search-input').val();
    
    $.ajax({
      url: '/search_persons',
      type: 'GET',
      data: { 'q': searchQuery },
      success: function(response) {
        $('#table-container').html(response); // 用返回的表格HTML替换容器内容
      },
      error: function() {
        alert('搜索出错啦！');
      }
    });
  });
});
</script>
{% endblock %}

先安装适配Python2.7的依赖：

pip install flask==0.12.5 psycopg2==2.7.7

然后写后端路由，处理搜索请求、查询数据库并渲染表格子模板：

# app.py
from flask import Flask, render_template, request
import psycopg2

app = Flask(__name__)

# PostgreSQL连接配置，替换成你的实际数据库信息
DB_CONFIG = {
    'host': 'localhost',
    'database': 'your_db_name',
    'user': 'your_db_user',
    'password': 'your_db_password',
    'port': 5432
}

def get_db_connection():
    conn = psycopg2.connect(**DB_CONFIG)
    return conn

# 原有的edit_person路由，渲染完整页面
@app.route('/edit_person')
def edit_person():
    # 初始化页面时加载所有数据（可选）
    conn = get_db_connection()
    cur = conn.cursor()
    cur.execute('SELECT id, name, email FROM persons;')
    persons = cur.fetchall()
    cur.close()
    conn.close()
    return render_template('edit_person.html', persons=persons)

# 搜索路由，只返回表格HTML片段
@app.route('/search_persons')
def search_persons():
    search_query = request.args.get('q', '')
    conn = get_db_connection()
    cur = conn.cursor()
    # 用参数化查询避免SQL注入！这一步非常重要
    cur.execute('SELECT id, name, email FROM persons WHERE name ILIKE %s OR email ILIKE %s;', 
                ('%' + search_query + '%', '%' + search_query + '%'))
    persons = cur.fetchall()
    cur.close()
    conn.close()
    # 只渲染表格子模板，返回HTML片段
    return render_template('_person_table.html', persons=persons)

if __name__ == '__main__':
    app.run(debug=True)

• SQL注入防护：绝对不要直接把用户输入拼到SQL语句里，上面用了%s作为占位符，psycopg2会自动处理转义，避免安全问题。
• Python2.7兼容性：必须安装适配的Flask和psycopg2版本，比如上面指定的0.12.5和2.7.7，这些版本完全支持Python2.7。
• 局部渲染逻辑：后端只返回表格子模板的HTML，前端通过AJAX接收后替换容器内容，实现无刷新更新表格。

这样就能实现你要的功能：用户输入关键词后点击搜索，后端查询数据库并返回表格片段，页面仅更新表格区域，不用刷新整个页面。

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