基于Jqgrid与SQL实现多输入条件查询的技术求助

嘿，这个需求我之前帮不少开发者落地过，核心就是动态构建查询条件，同时兼顾前端交互的流畅性和后端的安全性，我给你拆解一下具体实现思路和代码示例：

一、前端交互实现 #

首先需要做两个输入控件（下拉选择框更符合这类分类选择场景），监听用户的选择操作，把选中的参数传给后端。这里用原生HTML+JS做示例：

<!-- 选择控件区域 -->
<div class="input-group">
  <label for="fruit-select">水果类别:</label>
  <select id="fruit-select">
    <option value="">-- 请选择 --</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
</div>
<div class="input-group">
  <label for="color-select">颜色:</label>
  <select id="color-select">
    <option value="">-- 请选择 --</option>
    <option value="red">红色</option>
    <option value="yellow">黄色</option>
    <option value="orange">橙色</option>
  </select>
</div>
<button id="query-btn">查询数据</button>

<!-- 结果展示区域 -->
<div id="result-box"></div>

<script>
// 监听查询按钮点击事件
document.getElementById('query-btn').addEventListener('click', async () => {
  // 收集用户选择的参数
  const selectedFruit = document.getElementById('fruit-select').value;
  const selectedColor = document.getElementById('color-select').value;

  try {
    // 向后端发送请求
    const response = await fetch('/api/get-fruit-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ fruit: selectedFruit, color: selectedColor })
    });

    // 处理返回结果并渲染到页面
    const data = await response.json();
    const resultBox = document.getElementById('result-box');
    if (data.length === 0) {
      resultBox.innerHTML = '<p>没有匹配的数据哦</p>';
      return;
    }
    resultBox.innerHTML = `
      <ul>
        ${data.map(item => `<li>${item.fruit_cn} - ${item.color_cn}: ${item.detail}</li>`).join('')}
      </ul>
    `;
  } catch (err) {
    console.error('查询出错:', err);
    document.getElementById('result-box').innerHTML = '<p>查询失败，请稍后重试</p>';
  }
});
</script>

二、后端动态查询逻辑 #

后端的核心是根据前端传过来的参数，动态拼接安全的SQL查询语句，绝对不能直接拼接字符串（会有SQL注入风险），必须用参数化查询。这里用Python Flask+SQLite做示例：

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

# 获取数据库连接的工具函数
def get_db_conn():
    conn = sqlite3.connect('fruit_db.db')
    conn.row_factory = sqlite3.Row  # 让查询结果可以按字段名访问
    return conn

@app.route('/api/get-fruit-data', methods=['POST'])
def get_fruit_data():
    # 接收前端传过来的参数
    req_data = request.get_json()
    target_fruit = req_data.get('fruit', '')
    target_color = req_data.get('color', '')

    # 构建动态查询语句和参数列表
    base_query = 'SELECT * FROM fruit_table WHERE 1=1'
    query_params = []

    if target_fruit:
        base_query += ' AND fruit_en = ?'
        query_params.append(target_fruit)
    if target_color:
        base_query += ' AND color_en = ?'
        query_params.append(target_color)

    # 执行查询并返回结果
    conn = get_db_conn()
    cursor = conn.cursor()
    cursor.execute(base_query, query_params)
    results = cursor.fetchall()
    conn.close()

    # 把数据库返回的Row对象转成普通字典列表
    result_list = [dict(row) for row in results]
    return jsonify(result_list)

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

三、关键注意事项 #

• SQL注入防护：全程使用参数化查询，绝对不要把用户输入直接拼到SQL语句里
• 空值处理：用WHERE 1=1作为基础条件，这样不管有没有额外的筛选条件，SQL语句都能正常执行
• 灵活扩展：如果以后要加更多筛选字段，只需要在前端加对应控件，后端加判断逻辑即可
• 边界情况：可以根据需求调整逻辑，比如当用户两个字段都为空时，返回全部数据还是提示用户至少选择一个条件

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