我一直在建立一个保龄球计分器。
计算器本身有效，但您必须立即在表格中输入所有分数，然后计算总分。
我希望它循环形成表单以输入每个帧的分数，提交表单显示当前分数并再次为下一帧重新加载表单。
这是我第一次使用ajax并遵循如何通过ajax提交表单的教程，但它似乎没有用。
下面是两个脚本。
PHP脚本：
<?php
session_start();
//start a new game
if (isset($_GET["endGame"]) && $_GET["endGame"] == 'yes') {
session_destroy();
//redirect to homepage and remove any get parameters
$location="http://localhost/bbc/v8.php";
echo '<META HTTP-EQUIV="refresh" CONTENT="0;URL='.$location.'">';
}
//Check if the number of players has been set
if (isset($_POST['next'])) {
//Determine thye number players
foreach ($_POST['numberOfPlayers'] as $player) {
$_SESSION['numberOfPlayers'] = $player;
$location="http://localhost/bbc/v8.php";
echo '<META HTTP-EQUIV="refresh" CONTENT="0;URL='.$location.'">';
}
//check number of players has been set before enter player names
} elseif (isset($_SESSION['numberOfPlayers'])) {
$numberOfPlayers = $_SESSION['numberOfPlayers'];
if (!isset($_POST['playerSubmit']) || (isset($_POST['scores']))) {
?>
<!-- Form to enter the playes names -->
<form method="post" action="">
<fieldset>
<?php
$x = 1;
echo '<div class="custTitle"><h3>Enter player names below</h3></div>';
while ($x <= $numberOfPlayers) {
echo '<input class="form-control" type="text" name="players[]" placeholder="Player ' . $x . '">';
$x++;
}
?>
</fieldset>
<input type="submit" name="playerSubmit" value="Start Game">
</form>
<?php
}// close if
}
if (isset($_POST['playerSubmit'])) {
$players = array();
foreach ($_POST['players'] as $player) {
$players[] = $player;
}
// save player names array to session for reuse
$_SESSION['players'] = $players;
}
//Check player name have been submitted
if(isset($_POST['playerSubmit']) || isset($_SESSION['players'])) {
//create global variable of players array
$players = $_SESSION['players'];
$_SESSION['frameScore'] = array(0);
$frameCount = 1;
while ($frameCount <=9 ) {
?>
<!-- Form to enter players score-->
<form method="post" action="" class="ajax">
<?php
$i = 0;
while($i < $_SESSION['numberOfPlayers']){
echo '<fieldset>';
echo '<h3>' . $players[$i] . '</h3>';
$x=1;
// loop the form 21 times for maximum of 21 throws
while($x <= 3){
?>
<label>Throw, <?php echo $x; ?></label>
<select class="form-control" name="score[<?php echo $i; ?>][<?php echo $x; ?>]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">X</option>
</select>
<?php
$x++;
}// close 21 throws while
?>
<input type="hidden" name="player[<?php echo $i; ?>]" value="<?php echo $players[$i] ?>">
</fieldset>
<?php
$i++;
}// close while for looping throuhg players
?>
<input type="submit" value="Finish Game" name="scores"/>
</form>
<?php
// close player submit if
// check if any scores have been submitted
if(isset($_POST['score'])) {
$i = 0;
$result = [];
foreach($_SESSION['players'] as $name) {
$result[$name] = $_POST['score'][$i];
$pins = $_POST['score'][$i];
$game = calculateScore($i, $pins);
$i++;
}
}
$frameCount++;
}// close do while
// if number of players is not yet set the show the form to select number of players
} else {
?>
<!-- Form to select the number players -->
<h2>How many players will be bowling?</h2>
<form method="post" action="">
<select class="form-control" name="numberOfPlayers[]">
<option name="numberOfPlayers[]" value="1">1</option>
<option name="numberOfPlayers[]" value="2">2</option>
<option name="numberOfPlayers[]" value="3">3</option>
<option name="numberOfPlayers[]" value="4">4</option>
<option name="numberOfPlayers[]" value="5">5</option>
<option name="numberOfPlayers[]" value="6">6</option>
</select>
<input type="submit" name="next" value="Next">
</form>
<?php
}// close else
// if the number of players has been set show a 'New Game' button
if (isset($_SESSION['numberOfPlayers'])) {
echo '<button class="btn_lrg"><span><a href="http://localhost/bbc/v8.php?endGame=yes">New Game</a></span></button>';
}
// function to calculate the players scores
function calculateScore($player, $pins) {
global $players;
$frame = 0;
// create an array for the frame score
//$frameScore = $_SESSION['frameScore'];
//$frameScore = array(0);
//loop for 10 frames of a game
while ($frame <=9) {
$_SESSION['frameScore'][$frame] = array_shift($pins);
//Check for a strike
if($_SESSION['frameScore'][$frame] == 10) {
$_SESSION['frameScore'][$frame] = (10 + $pins[0] + $pins[1]);
// No strike, so take in two throws
} else {
$_SESSION['frameScore'][$frame] = $_SESSION['frameScore'][$frame] + array_shift($pins);
//Check for a spare
if($_SESSION['frameScore'][$frame] == 10) {
$_SESSION['frameScore'][$frame] = (10 + $pins[0]);
}
}// close if
//Move to the next frame and loop again
$frame++;
}// close while
//echo out player scoreborad
echo '<h3>' .$_SESSION["players"][$player]. '</h3>' . '<h4>' . array_sum($_SESSION['frameScore']) . '</h4>';
}// end calculateScore function
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
<!-- End Bowling Calculator Script -->
的Javascript / AJAX：
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
});
return false;
});