如何通过AJAX获取select选中值并插入SQL查询语句

你现有代码的逻辑已经基本跑通，只需要补全几个缺失的处理点即可正常运行：

• 给后端接收的参数加默认值，避免未传参时报PHP语法错误
• 替换拼接SQL的写法为预处理语句，规避SQL注入风险
• 补全AJAX成功回调的渲染逻辑，把查询结果展示到页面上
• 新增AJAX请求判断，避免后端返回完整页面内容

调整后各部分代码 #

1. 前端页面代码（bugs_cards.php） #

原有下拉框代码可保留，建议新增查询结果容器用来渲染返回的内容：

<div class="filtros-categoria-sistema">
  <select id="session" name="session"  class="form-control">
    <option value='' selected >Selecione o Sistema</option>
    <option value='00000000001'>teste 1</option>
    <option value='00000000002'>teste 2</option>
  </select> 
</div>
<!-- 新增查询结果容器 -->
<div id="card-list-container"></div>

2. AJAX交互代码 #

新增空值判断，避免选中默认空选项时发送无效请求，补全结果渲染逻辑：

$('#session').on('change', function(e){
  const workselected = $(this).val();
  // 空值不发请求
  if(!workselected) {
    $('#card-list-container').empty();
    return;
  }
  $.ajax({
    method: "POST",
    url: "bugs_cards.php",
    data: {workselected1: workselected},
    cache:false,
    success: function(data){
      // 把后端返回的查询结果渲染到容器中
      $('#card-list-container').html(data);
    }
  });
});

3. 后端SQL处理代码 #

新增参数默认值、预处理查询、AJAX请求判断：

// 区分AJAX请求和普通页面请求
if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest') {
  // 给参数加默认值，避免未传参时报错
  $workselected = isset($_POST['workselected1']) ? $_POST['workselected1'] : '';
  // 注意你原有代码里的$nome、$categoria变量也要提前赋值处理，这里假设你已经处理好了
  $nome = isset($nome) ? $nome : '';
  $categoria = isset($categoria) ? $categoria : '';

  // 使用预处理语句防注入，这里以PDO为例，用mysqli可替换为对应预处理写法
  $pdo = new PDO("mysql:host=你的数据库地址;dbname=你的数据库名;charset=utf8", "数据库账号", "数据库密码");
  $stmt = $pdo->prepare("SELECT * FROM sup_cad_bugs_cards where painel_COD = ? AND card_status = 'EN' AND card_nome = ? AND card_tipo_COD = ?");
  $stmt->execute([$workselected, $nome, $categoria]);
  $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 渲染查询结果返回给前端，可根据你的业务需求调整输出格式
  foreach ($result as $card) {
    echo "<div class='card-item'>{$card['card_nome']}</div>";
  }
  exit;
}
// 下面放原有页面渲染的逻辑

内容的提问来源于stack exchange，提问作者Maurício Freire