jQuery AJAX 表单提交中获取选中值的正确方法-js教程-PHP中文网

jQuery AJAX 表单提交中获取选中值的正确方法

本文详解 jquery 中因 html id 重复导致 ajax 始终读取首个单选按钮值的问题，并提供基于 name + :checked 的标准解决方案，确保动态获取用户真实选择。

本文详解 jquery 中因 html id 重复导致 ajax 始终读取首个单选按钮值的问题，并提供基于 name + :checked 的标准解决方案，确保动态获取用户真实选择。

在使用 jQuery 发起 AJAX 请求提交表单时，一个常见却隐蔽的错误是：误用重复的 id 属性配合 $("#id").val() 获取单选按钮（radio）值。正如示例所示，所有 bet 和 choice 单选按钮均被赋予了相同的 id="bet" 或 id="choice" —— 这严重违反了 HTML 规范（id 必须全局唯一），也直接导致 jQuery 的 ID 选择器 $("#bet") 始终只匹配 DOM 中第一个匹配元素（即默认选中的 value="1000" 和 value="1"），因此无论用户实际选择哪一项，AJAX 提交的数据永远固定为 "bet": "1000", "choice": "1"。

✅ 正确做法：使用 name + :checked 选择器

单选按钮组天然通过 name 属性进行逻辑分组，而 :checked 伪类可精准定位当前被选中的那个。这是语义清晰、符合规范且浏览器兼容性极佳的标准方案：

$(document).ready(function () {
  $("form#game").submit(function (event) {
    // ✅ 正确：按 name 分组并筛选已选中的项
    var formData = {
      choice: $("input[name='choice']:checked").val(),
      bet:    $("input[name='bet']:checked").val()
    };

    $.ajax({
      type: "POST",
      url: "inc/roll.php",
      data: formData,
      dataType: "json",
      encode: true
    })
    .done(function (data) {
      const outputEl = document.getElementById('results');
      if (data.status === "winner") {
        outputEl.innerHTML = 
          `Status: ${data.status}<br>` +
          `Results: ${data.results}<br>` +
          `Choice: ${data.choice}<br>` +
          `Bet: ${data.bet}<br>` +
          `You won: ${data.prize}`;
      } else {
        outputEl.innerHTML = 
          `Status: ${data.status}<br>` +
          `Results: ${data.results}<br>` +
          `Choice: ${data.choice}<br>` +
          `You lost: ${data.bet}`;
      }
    })
    .fail(function (xhr, status, error) {
      console.error("AJAX request failed:", status, error);
      document.getElementById('results').innerHTML = "Error: Failed to process your bet.";
    });

    event.preventDefault();
  });
});

⚠️ 关键注意事项

禁止复用 id：HTML 中每个 id 值必须唯一。若需为多个元素添加标识，应使用 class 或自定义 data-* 属性。
显式指定表单 ID：将 $("form").submit(...) 改为 $("form#game").submit(...) 可避免意外绑定到页面其他表单，提升健壮性。
服务端无需修改：PHP 脚本 roll.php 本身逻辑正确（通过 $_POST['choice'] 和 $_POST['bet'] 接收），问题纯属前端数据采集方式错误。
增强容错：建议在获取值后添加空值校验（如 if (!formData.choice || !formData.bet)），防止用户未做选择就提交。