无需表单提交，通过jQuery Ajax将下拉框选中值传入PHP变量

现有一段用jQuery Ajax实现下拉框onchange事件传值的代码，目前只能把返回值展示在页面上。需求是无需表单提交，在同一页面将传递的sweets值直接赋值给PHP变量$string，此前未找到适配方案。

现有代码 #

<div id="test">
  <?php
    if (isset($_POST['sweets']))
    {
      ob_clean();
      echo $_POST['sweets'];
      exit;
    }
  ?>
</div>

<form id="a" action="" method="post">
  <select name="sweets" onchange="change()" id="select1">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
</form>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  function change() {
    var sweets = $("#select1").val();
    $.ajax({
      type: "POST",
      data: { sweets: sweets },
      success: function(data) {
        $("#test").html(data);
      }
    });
  }
</script>

核心问题说明 #

PHP是服务器端语言，页面加载时就已经执行完毕并生成HTML返回给浏览器；而前端Ajax是页面加载完成后，在浏览器端异步发起的请求。两者运行时机完全分离，不可能直接在当前页面的PHP代码中获取Ajax传递的值并赋值给$string——等Ajax请求发出去时，当前页面的PHP代码早就执行完了。

可行解决方案 #

方案1：用Session存储值，供后续PHP逻辑调用

通过会话（Session）把Ajax传递的值存起来，后续同一会话内的页面请求或逻辑都能获取到这个值：

<?php
session_start(); // 必须放在页面最顶部，输出之前

if (isset($_POST['sweets']))
{
  $_SESSION['sweets'] = $_POST['sweets']; // 把值存入Session
  ob_clean();
  echo $_POST['sweets'];
  exit;
}

// 后续需要使用$string的地方
$string = $_SESSION['sweets'] ?? ''; // 用空值做默认，避免未定义报错
?>

前端代码保持不变，这样刷新页面或者在同会话的其他PHP代码中，$string就能拿到下拉框选中的值。

方案2：让Ajax请求返回预渲染的PHP处理结果

如果需要用$string生成动态内容，可以让后端PHP直接返回处理好的HTML片段，前端直接插入页面：

<?php
if (isset($_POST['sweets']))
{
  $string = $_POST['sweets']; // 这里直接拿到值
  ob_clean();
  // 用$string生成需要展示的内容
  echo "<div>你选中的甜品是：<strong>{$string}</strong></div>";
  exit;
}
?>

前端Ajax的success回调依然是把data插入#test容器，这样就间接实现了用$string生成内容的需求。

方案3：前端隐藏字段暂存，后续提交时PHP获取

如果只是需要把值暂存在前端，后续有表单提交动作时让PHP获取，可以加一个隐藏输入框：

<!-- 在表单内添加隐藏字段 -->
<form id="a" action="" method="post">
  <select name="sweets" onchange="change()" id="select1">
    <!-- 下拉选项不变 -->
  </select>
  <input type="hidden" id="hidden_sweets" name="hidden_sweets" value="">
</form>

修改Ajax的success回调：

success: function(data) {
  $("#test").html(data);
  $("#hidden_sweets").val(data); // 把值存入隐藏字段
}

之后如果提交表单，PHP可以通过$_POST['hidden_sweets']拿到值，但这种方式还是需要表单提交动作，不符合"无需提交"的话可以优先选前两种方案。

总结 #

核心是搞懂前后端的运行逻辑差异：PHP先执行生成页面，前端Ajax后发起请求，所以不能直接在当前页面的PHP变量中捕获异步传递的值。通过Session存储、返回预渲染内容是最贴合需求的两种实现方式。

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