jquery ajax 为每个结果返回相同的值

Question

我有这样的表格：

<script src="js/results.js"></script>
    <div class="container" id="results">
    <form action="inc/roll.php" method="POST" id="game">
        <div class="row">
          <div class="col m2">
             <p>
                <label>
                <input name="bet" type="radio" value="1000" id="bet" checked/>
                <span>1000</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="bet" type="radio" value="10000" id="bet"  />
                <span>10,000</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="bet" type="radio" value="100000" id="bet"  />
                <span>100,000</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="bet" type="radio" value="1000000" id="bet" />
                <span>1,000,000</span>
                </label>
             </p>
          </div>
        </div>
      <div class="row">
          <div class="col m2">
             <p>
                <label>
                <input name="choice" type="radio" value="1" id="choice" checked/>
                <span>1</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="choice" type="radio" value="2" id="choice"  />
                <span>2</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="choice" type="radio" value="3" id="choice"  />
                <span>3</span>
                </label>
             </p>
          </div>
          <div class="col m2">
             <p>
                <label>
                <input name="choice" type="radio" value="4" id="choice" />
                <span>4</span>
                </label>
             </p>
          </div>
        </div>
        <div class="row">
          <div class="col m2">
            <input type="submit" name="submit" value="Play!">
          </div>
      </div>
    </form>
  </div>

您选择 2 个值，即您的“赌注”和您认为获胜的数字（1、2、3 或 4）。表单被提交到这个 PHP 脚本 (roll.php):

<?php

require_once('errors.php');

$choice = $_POST['choice'];
$bet    = $_POST['bet'];

if (!empty($choice) && !empty($bet)) {

function roll_dice() {
$roll_min = 1000;
$roll_max = 100000;
$roll = random_int($roll_min, $roll_max);

return ($roll % 4);
  }

  for ($x = 0; $x <= 1000; $x++) {

    $results = roll_dice();

   if ($results == 0) {
  roll_dice();
  }
if ($results != 0) {
    
    if ($choice == $results) {
        $status = array(
            "status"    => "winner",
            "choice"    => $choice,
            "results"   => $results,
            "bet"       => $bet,
            "prize"     => $bet * 2.5
        );
        echo json_encode($status);
        exit;
      }
      else {
        $status = array(
            "status"    => "loser",
            "choice"    => $choice,
            "results"   => $results,
            "bet"       => $bet,
            "prize" => 0
        );

        echo json_encode($status);
        exit;
    }


    }
  }
}

PHP 脚本结果由该 ajax 函数（results.js）解析：

$(document).ready(function () {

$("form").submit(function (event) {
var formData = {
  choice: $("#choice").val(),
  bet: $("#bet").val() 
};

$.ajax({
  type: "POST",
  url: "inc/roll.php",
  data: formData,
  dataType: "json",
  encode: true,
}).done(function (data) {
  if (data["status"] == "winner") {
  document.getElementById('results').innerHTML = "Status: " + data["status"] + "<br />Results: " + data["results"] + "<br />Choice: " + data["choice"] + "<br />Bet: " + data["bet"] + "<br />You won: " + data["prize"];
  }
  if (data["status"] == "loser") {
    document.getElementById('results').innerHTML = "Status: " + data["status"] + "<br />Results: " + data["results"] + "<br />Choice: " + data["choice"] + "<br />You lost: " + data["bet"];
  }

});

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

问题是ajax总是返回结果为：

Status: winner/loser
Results: 2 
Choice: 1 <-- this is always 1 no matter what you select in the form 
You lost/won: 1000 <-- this is always 1000 no matter what you select in the form

如果您从 html 中注释掉 results.js（使其成为非 ajax），PHP 脚本将自行返回正确的结果。

我需要一些帮助来理解为什么 ajax 函数没有返回正确的结果。

Answer 1

问题在于

id

作为选择和下注。您正在使用

$("#choice").val()

和

$("#bet").val()

来获取这些值，但由于您有多个具有相同 id 的元素，jQuery 仅选择它遇到的第一个具有该 id 的元素。这就是为什么您总是选择 1 并下注 1000。

要解决此问题，您应该使用 name 属性而不是 id 属性来选择表单中单选按钮的值。