如何实现文本框onchange执行SQL及关联表格传值给PHP做PDO查询？

问题1：如何在<input type="text">的onchange事件中执行SQL查询？ #

首先得敲个重点：绝对不能直接在前端JavaScript里执行SQL查询——这会把数据库的账号密码等敏感信息直接暴露给所有人，等于给黑客开了后门。正确的做法是通过前端触发请求，把数据传给后端，由后端安全地执行SQL操作。

具体步骤和示例代码如下：

1. 前端监听input的onchange事件，获取输入值
2. 通过AJAX（这里用原生fetch）把值发送到后端PHP接口
3. 后端用PDO执行安全的预处理查询（必须用预处理，防止SQL注入）
4. 把查询结果返回给前端，前端再处理展示

前端代码（HTML+JS） #

<input type="text" id="myInput" placeholder="输入内容后触发查询">
<div id="queryResult"></div>

<script>
const input = document.getElementById('myInput');
input.addEventListener('change', async function() {
  const inputValue = this.value.trim();
  if (!inputValue) return; // 空值就不发起请求了

  try {
    // 发送POST请求到后端接口
    const response = await fetch('handle_sql_query.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `input_content=${encodeURIComponent(inputValue)}`
    });

    const result = await response.json();
    // 把结果展示到页面上
    document.getElementById('queryResult').textContent = JSON.stringify(result, null, 2);
  } catch (error) {
    console.error('请求失败:', error);
    document.getElementById('queryResult').textContent = '查询出错，请稍后重试';
  }
});
</script>

后端PHP代码（handle_sql_query.php） #

<?php
// 替换成你的数据库配置
$dbHost = 'localhost';
$dbName = 'your_database';
$dbUser = 'your_username';
$dbPass = 'your_password';

try {
  // 初始化PDO连接
  $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 检查前端是否传了参数
  if (!isset($_POST['input_content'])) {
    echo json_encode(['error' => '缺少查询参数']);
    exit;
  }
  $inputContent = $_POST['input_content'];

  // 用预处理语句执行查询，避免SQL注入
  $stmt = $pdo->prepare("SELECT * FROM your_table WHERE target_column = ?");
  $stmt->execute([$inputContent]);
  $queryResult = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 返回查询结果给前端
  echo json_encode($queryResult);
} catch (PDOException $e) {
  echo json_encode(['error' => '数据库查询失败：' . $e->getMessage()]);
}
?>

问题2：关联两个表格，解决Undefined variable: data的错误 #

你遇到的Notice: Undefined variable: data错误，大概率是两个原因之一：要么前端没把单元格值正确传给后端，要么后端没正确接收参数、提前使用了未定义的$data变量。咱们一步步解决：

第一步：前端获取选中单元格的值并发送请求 #

假设你的两个表格结构如下，前端监听第一个表格的单元格点击事件：

<table id="sourceTable" border="1">
  <tr><td>用户ID-1</td><td>张三</td></tr>
  <tr><td>用户ID-2</td><td>李四</td></tr>
</table>

<h3>关联数据表格</h3>
<table id="targetTable" border="1">
  <!-- 这里会被后端返回的数据填充 -->
</table>

前端JS代码：

const sourceTable = document.getElementById('sourceTable');
const targetTable = document.getElementById('targetTable');

sourceTable.addEventListener('click', async function(e) {
  // 判断点击的是表格单元格
  if (e.target.tagName === 'TD') {
    const selectedValue = e.target.textContent.trim();
    if (!selectedValue) return;

    try {
      // 发送请求到后端，传递选中的值
      const response = await fetch('update_target_table.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `selected_val=${encodeURIComponent(selectedValue)}`
      });

      const tableData = await response.json();
      // 渲染第二个表格
      renderTargetTable(tableData);
    } catch (error) {
      console.error('更新表格失败:', error);
      targetTable.innerHTML = '<tr><td>加载失败，请重试</td></tr>';
    }
  }
});

// 渲染第二个表格的函数
function renderTargetTable(data) {
  if (!data || data.length === 0) {
    targetTable.innerHTML = '<tr><td>暂无匹配数据</td></tr>';
    return;
  }

  // 生成表头（根据你的实际字段调整）
  let tableHtml = '<tr>';
  Object.keys(data[0]).forEach(key => {
    tableHtml += `<th>${key}</th>`;
  });
  tableHtml += '</tr>';

  // 生成表格内容
  data.forEach(row => {
    tableHtml += '<tr>';
    Object.values(row).forEach(value => {
      tableHtml += `<td>${value}</td>`;
    });
    tableHtml += '</tr>';
  });

  targetTable.innerHTML = tableHtml;
}

第二步：后端PHP接收参数并执行PDO查询（修复Undefined变量问题） #

这里重点处理$data未定义的问题，确保先接收参数、再定义变量：

<?php
// 替换成你的数据库配置
$dbHost = 'localhost';
$dbName = 'your_database';
$dbUser = 'your_username';
$dbPass = 'your_password';

try {
  $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 先检查前端是否传递了参数
  if (!isset($_POST['selected_val'])) {
    echo json_encode([]);
    exit;
  }
  $selectedVal = $_POST['selected_val'];

  // 执行预处理查询（SQL语句根据你的业务逻辑调整）
  $stmt = $pdo->prepare("SELECT * FROM target_table WHERE related_id = ?");
  $stmt->execute([$selectedVal]);
  // 定义$data变量，接收查询结果
  $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 返回数据给前端
  echo json_encode($data);
} catch (PDOException $e) {
  echo json_encode([]);
  // 可以把错误日志记录到服务器，方便排查
  error_log('数据库错误：' . $e->getMessage());
}
?>

你之前的错误大概率是没检查$_POST['selected_val']是否存在，或者在执行查询前就使用了$data变量。现在这样写，$data会被正确定义，就不会出现Undefined的提示了。

最后再提醒一句：永远不要把前端传来的参数直接拼到SQL语句里，必须用PDO预处理语句，这是防止SQL注入的核心手段！

内容的提问来源于stack exchange，提问作者Hüseyin Çiftçi