Ajax未调用PHP文件问题：下拉选单联动获取项目价格失败

看起来你遇到的核心问题是下拉框的change事件没有正确触发Ajax请求，甚至连PHP文件都没被调用。我帮你梳理几个最可能的原因和对应的解决办法：

1. 先确认jQuery是否正确引入 #

你的代码用了$来调用jQuery方法，但如果页面里没加载jQuery库，整个脚本都会失效。你需要确保在这段脚本之前，已经引入了jQuery——可以用本地的jQuery文件，比如：

<script src="路径到你的jquery.min.js"></script>

2. 确保脚本在DOM加载完成后执行 #

如果你的脚本放在页面顶部，此时#puja_name2这个下拉框还没被浏览器渲染出来，事件绑定就会失败。解决办法是把脚本包裹在$(document).ready()里，或者把脚本放在</body>标签之前：

$(document).ready(function() {
  // 你的change事件代码放在这里
});

3. 检查Ajax的URL路径是否正确 #

你写的url: "../ajax_price.php"是相对路径，要确认当前页面的位置和ajax_price.php的位置是否匹配。比如如果当前页面在/pages/form.php，那么../会指向/，如果ajax_price.php在根目录下就没问题；但如果它在/ajax/ajax_price.php，那路径就错了。可以用浏览器的开发者工具（Network标签）查看请求是否404，来确认路径是否正确。

4. 先调试事件是否触发 #

在change事件里加个console.log，确认下拉框的change事件真的被触发了：

$("#puja_name2").on('change',function() {
  console.log("下拉选项已改变，选中ID：" + $(this).val());
  // 剩下的代码...
});

打开浏览器的控制台（F12），看看选择选项时有没有输出这条日志。如果没有，说明事件绑定失败，回到前面的步骤检查jQuery和DOM加载。

5. 给Ajax加上错误回调，排查请求问题 #

在$.ajax里加上错误回调，能帮你看到请求失败的原因：

$.ajax({
  type: "POST",
  url: "../ajax_price.php",
  data: data,
  cache: false,
  success: function(html) {
    $("#puja_price2").html(html); // 这里注意是html参数，不是data！你原来的代码写错了
  },
  error: function(xhr, status, error) {
    console.log("Ajax请求失败：" + error);
    console.log("状态码：" + status);
  }
});

修正后的完整代码示例 #

<script src="jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  $("#puja_name2").on('change',function() {
    console.log("下拉选项改变，选中ID：" + $(this).val());
    
    var id=$(this).val();
    // 用对象格式传递data更清晰，避免字符串拼接的潜在问题
    var data = { id: id };
    
    $.ajax({
      type: "POST",
      url: "../ajax_price.php",
      data: data,
      cache: false,
      success: function(html) {
        console.log("Ajax请求成功，返回内容：" + html);
        $("#puja_price2").html(html);
      },
      error: function(xhr, status, error) {
        console.log("Ajax请求失败：" + error);
        console.log("状态码：" + status);
      }
    });
  });
});
</script>

<div class="form-group">
  <label> Puja Name<span class="font-red">* </span>: </label>
  <select class="form-control" name="puja_name2" id="puja_name2" data-validetta="required">
    <option value="">Select Puja Name</option>
    <?php 
    $SQL_STATEMENT_puja = $DatabaseCo->dbLink->query("SELECT * FROM puja_type ");
    while($DatabaseCo->dbRow = mysqli_fetch_object($SQL_STATEMENT_puja)){ 
    ?>
    <option value="<?php echo $DatabaseCo->dbRow->puja_id; ?>" ><?php echo $DatabaseCo->dbRow->puja_name; ?></option>
    <?php } ?>
  </select>
</div>

<div class="form-group">
  <label> Price <span class="font-red">* </span>:</label>
  <select id="puja_price2" > </select>
</div>

额外的PHP调试建议 #

在ajax_price.php开头加上错误输出，确保能看到PHP的问题：

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 先测试是否能接收到ID
var_dump($_POST);

// 然后写你的逻辑，比如根据ID查询价格，输出option标签
// 示例：
// $id = $_POST['id'];
// $query = "SELECT price FROM puja_type WHERE puja_id = $id";
// 执行查询后输出<option value='$price'>$price</option>
?>

按照这些步骤一步步排查，应该能解决你的问题。

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