AJAX传递双变量刷新Engine下拉框失败问题求助

算力阿峰

2026-6-20

级联下拉框问题：选择fuel后engine无数据加载

我有generation、fuel、engine三个带预定义值的下拉选择框，HTML结构如下：

<div class="row">
    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
        <label>Generatie <span>*</span></label>
        <div class='s-relative'>
            <select class="m-select" name="car-generation" id="car-generation">
            <option value='0' name='generation_name' id='generation_name'>Alege mai intai un model</option>
            </select>
            <span class="fa fa-caret-down"></span>
        </div>
    </div>
    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
        <label>Combustibil <span>*</span></label>
        <div class='s-relative'>
            <select class="m-select" name="car-fuel" id="car-fuel">
            <option value='0' name='fuel_name' id='fuel_name'>Alege mai intai o generatie</option>
            </select>
            <span class="fa fa-caret-down"></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
        <label>Engine <span>*</span></label>
        <div class='s-relative'>
            <select class="m-select" name="car-engine" id="car-engine">
                <option value='0' name='engine_name' id='engine_name'>Alege mai intai un combustibil</option>
            </select>
            <span class="fa fa-caret-down"></span>
        </div>
    </div>
</div>

目前选择generation选项时，fuel下拉框能正常加载对应值，但选择fuel选项后，engine下拉框无任何数据显示。

我的JS代码如下：

$(document).ready(function() {
  $('#car-generation').on('change', function() {
    var generation_id = $(this).val();
    if (generation_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'generation_id=' + generation_id,
        success: function(html) {
          $('#car-fuel').html(html);
        }
      });
    } else {
      $('#car-fuel').html('<option value="0">Alege mai intai o generatie</option>');
    }
  });
  $('#car-fuel').on('change', function() {
    var fuel_id = $(this).val();
    if (fuel_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: {
          fuel_id: 'fuel_id',
          generation_id: 'generation_id'
        },
        success: function(html) {
          $('#car-engine').html(html);
        }
      });
    } else {
      $('#car-engine').html('<option value="0">Alege un motor</option>');
    }
  });
  $('#car-engine').on('change', function() {
    var engine_id = $(this).val();
    if (engine_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'engine_id=' + engine_id,
        success: function(html) {
          $('#car-transmission').html(html);
        }
      });
    } else {
      $('#car-transmission').html('<option value="0">Alege o transmisie</option>');
    }
  });
});

PHP代码如下：

<?php
if(isset($_POST["generation_id"]) && !empty($_POST["generation_id"]))
{
    $generation_id = $_POST["generation_id"];
    $query = $mysqli->query("SELECT fuel_id, fuel_name FROM fuels WHERE generation_id =" . $_POST['generation_id']);
    $rowCount = $query->num_rows;

    if($rowCount > 0)
    {
        echo '<option value="0">Alege un combustibil</option>';
        while($row = $query->fetch_assoc())
        { 
            echo '<option value="'.$row['fuel_id'].'">'.$row['fuel_name'].'</option>';
        }
    }else
    {
        echo '<option value="0">Alege un combustibil</option>';
    }
}

if(isset($_POST["fuel_id"]) && !empty($_POST["fuel_id"]))
{
    $fuel_id = $_POST["fuel_id"];
    $query = $mysqli->query("SELECT engines.engine_id, engines.engine_name FROM engines INNER JOIN generations ON engines.generation_id = generations.generation_id INNER JOIN fuels ON engines.fuel_id = fuels.fuel_id WHERE engines.generation_id = '$generation_id' AND engines.fuel_id = '$fuel_id'");
    $rowCount = $query->num_rows;

    if($rowCount > 0)
    {
        echo '<option value="0">Alege un motor</option>';
        while($row = $query->fetch_assoc())
        { 
            echo '<option value="'.$row['engine_id'].'">'.$row['engine_name'].'</option>';
        }
    }else
    {
        echo '<option value="0">Alege un motor</option>';
    }
}
?>

我缺乏Javascript、AJAX和jQuery相关经验，网上搜索未找到解决办法，请问我哪里出错了？

错误原因分析

JS参数传递错误：在#car-fuel的change事件中，AJAX的data参数传递的是字符串'fuel_id'和'generation_id'，而非实际选中的ID值，导致后端无法获取有效参数。
PHP参数未接收：处理fuel_id的逻辑中，$generation_id变量仅在第一个if块中定义，未从$_POST中重新获取，导致SQL查询中该变量为空，无法匹配数据。
SQL注入风险：直接拼接用户输入到SQL语句中，存在安全隐患。

修正后的代码

修正后的JS代码

$(document).ready(function() {
  $('#car-generation').on('change', function() {
    var generation_id = $(this).val();
    if (generation_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'generation_id=' + generation_id,
        success: function(html) {
          $('#car-fuel').html(html);
          // 切换generation时重置engine下拉框
          $('#car-engine').html('<option value="0">Alege mai intai un combustibil</option>');
        }
      });
    } else {
      $('#car-fuel').html('<option value="0">Alege mai intai o generatie</option>');
      $('#car-engine').html('<option value="0">Alege mai intai un combustibil</option>');
    }
  });

  $('#car-fuel').on('change', function() {
    var fuel_id = $(this).val();
    var generation_id = $('#car-generation').val();
    if (fuel_id > 0 && generation_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: {
          fuel_id: fuel_id,
          generation_id: generation_id
        },
        success: function(html) {
          $('#car-engine').html(html);
        }
      });
    } else {
      $('#car-engine').html('<option value="0">Alege mai intai un combustibil</option>');
    }
  });

  $('#car-engine').on('change', function() {
    var engine_id = $(this).val();
    if (engine_id > 0) {
      $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'engine_id=' + engine_id,
        success: function(html) {
          $('#car-transmission').html(html);
        }
      });
    } else {
      $('#car-transmission').html('<option value="0">Alege o transmisie</option>');
    }
  });
});

修正后的PHP代码

<?php
if(isset($_POST["generation_id"]) && !empty($_POST["generation_id"]))
{
    $generation_id = $_POST["generation_id"];
    // 使用预处理语句防止SQL注入
    $stmt = $mysqli->prepare("SELECT fuel_id, fuel_name FROM fuels WHERE generation_id = ?");
    $stmt->bind_param("i", $generation_id);
    $stmt->execute();
    $result = $stmt->get_result();
    $rowCount = $result->num_rows;

    if($rowCount > 0)
    {
        echo '<option value="0">Alege un combustibil</option>';
        while($row = $result->fetch_assoc())
        { 
            echo '<option value="'.$row['fuel_id'].'">'.$row['fuel_name'].'</option>';
        }
    }else
    {
        echo '<option value="0">Alege un combustibil</option>';
    }
    $stmt->close();
}

if(isset($_POST["fuel_id"]) && !empty($_POST["fuel_id"]) && isset($_POST["generation_id"]) && !empty($_POST["generation_id"]))
{
    $fuel_id = $_POST["fuel_id"];
    $generation_id = $_POST["generation_id"];

    // 使用预处理语句防止SQL注入，简化不必要的关联查询
    $stmt = $mysqli->prepare("SELECT engines.engine_id, engines.engine_name FROM engines WHERE engines.generation_id = ? AND engines.fuel_id = ?");
    $stmt->bind_param("ii", $generation_id, $fuel_id);
    $stmt->execute();
    $result = $stmt->get_result();
    $rowCount = $result->num_rows;

    if($rowCount > 0)
    {
        echo '<option value="0">Alege un motor</option>';
        while($row = $result->fetch_assoc())
        { 
            echo '<option value="'.$row['engine_id'].'">'.$row['engine_name'].'</option>';
        }
    }else
    {
        echo '<option value="0">Nu exista motoare pentru aceasta alegere</option>';
    }
    $stmt->close();
}
?>

内容的提问来源于stack exchange，提问作者Andrei Chiriță

AJAX传递双变量刷新Engine下拉框失败问题求助

错误原因分析 #

修正后的代码 #

修正后的JS代码 #

修正后的PHP代码 #

错误原因分析

修正后的代码

修正后的JS代码

修正后的PHP代码