同一页面未提交表单时JS向PHP传值及Undefined index问题排查

当然可以！不用提交表单，通过Ajax异步请求就能在同一页面完成JavaScript到PHP的数据传递，包括数组、对象等各种数据类型。针对你遇到的Undefined index错误和页面无更新的问题，咱们一步步来解决：

问题根源分析 #

你提到的PHP报错，并不是因为PHP在Ajax请求前执行（毕竟PHP是服务器端代码，页面加载时就已经执行完毕，Ajax是后续发起的新独立请求），真正的问题是：

1. 变量未初始化：begin变量只在#beginTijd的change事件里赋值，如果用户先修改#aantalSloepen但没碰过时间下拉框，begin就是未定义状态，Ajax传给PHP的date参数就不存在，导致PHP报错。
2. 缺少参数校验：PHP直接读取$_POST['date']和$_POST['quantity']，没有判断参数是否存在，一旦参数缺失就会抛出Undefined index错误。
3. 未更新页面内容：你的Ajax success回调只打印了日志，没有把PHP返回的结果更新到页脚的价格区域。

修正后的完整代码示例 #

1. HTML部分（保留基础结构，补充页脚价格容器） #

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#ffffff">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 表单下拉框 -->
<select id="beginTijd">
  <option value="09:00">09:00</option>
  <option value="10:00">10:00</option>
  <option value="11:00">11:00</option>
</select>

<select id="aantalSloepen">
  <option value="1">1艘</option>
  <option value="2">2艘</option>
  <option value="3">3艘</option>
</select>

<!-- 页脚价格显示容器 -->
<footer>
  <div id="rentalPrice">租赁价格：0</div>
</footer>

<script>
// JS代码放在这里
</script>
</body>
</html>

2. JavaScript部分（修正变量作用域与Ajax逻辑） #

$(document).ready(function() {
  // 初始化变量，页面加载时就获取下拉框的默认选中值
  let begin = $('#beginTijd').val();
  let aantal = $('#aantalSloepen').val();

  // 封装Ajax请求函数，避免重复代码
  function updatePrice() {
    $.ajax({
      type: "POST",
      url: window.location.href, // 指向当前PHP页面
      data: { 
        date: begin, 
        quantity: aantal,
        is_ajax: true // 标识这是Ajax请求，避免页面加载时执行计算
      },
      success: function(data) {
        console.log('返回计算结果:', data);
        // 更新页脚的价格显示
        $('#rentalPrice').text('租赁价格：' + data + ' 欧元');
      },
      error: function(xhr, status, error) {
        console.error('请求出错:', error);
      }
    });
  }

  // 时间下拉框change事件
  $('#beginTijd').change(function(){
    begin = $(this).val();
    updatePrice(); // 触发价格更新
  });

  // 数量下拉框change事件
  $('#aantalSloepen').change(function(){
    aantal = $(this).val();
    updatePrice(); // 触发价格更新
  });

  // 页面加载完成后先执行一次，显示初始价格
  updatePrice();
});

3. PHP部分（添加参数校验与价格计算逻辑） #

<?php
// 只处理Ajax请求，避免页面加载时执行计算逻辑
if(isset($_POST['is_ajax']) && $_POST['is_ajax'] === true) {
  // 校验参数是否存在，给默认值避免Undefined index错误
  $date = isset($_POST['date']) ? $_POST['date'] : '09:00';
  $quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 1;

  // 示例价格计算逻辑：根据时间和数量计算总价
  $basePrice = 50; // 基础单价
  $timeMultiplier = ($date >= '12:00') ? 1.5 : 1; // 中午后价格上浮50%
  $totalPrice = $basePrice * $quantity * $timeMultiplier;

  // 返回格式化后的计算结果
  echo number_format($totalPrice, 2);
  exit; // 终止后续页面输出，只返回计算结果
}
?>

关键优化点说明 #

• 变量初始化：页面加载时就获取下拉框默认值，避免未定义变量的问题。
• 封装请求逻辑：把Ajax请求封装成函数，重复调用更简洁。
• Ajax标识：通过is_ajax参数告诉PHP这是异步请求，避免页面加载时执行计算逻辑。
• 参数校验：PHP用isset()判断参数是否存在，给默认值，彻底解决Undefined index错误。
• 实时页面更新：在success回调里把PHP返回的结果更新到页脚容器，实现价格同步显示。

这样修改后，当你修改时长或数量时，页面会自动发送Ajax请求到PHP，计算出最新价格并同步显示在页脚，全程无需刷新页面。

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