我有一个保龄球游戏的应用程序。球员的名字和他们的分数一起列出。当按下“滚动”按钮时，分数将更新。问题是，除非刷新页面，否则更新的分数不会出现在屏幕上。
如果有人可以提供帮助，我将不胜感激！
这是主播放页面的样子：
Welcome players!
1: John: 0
2: Mark: 0
3: Paolo: 0
Pins :
Roll: 0
这是 UserController.java 文件：
package ajaxbowlgame;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ValidationUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class UserController {
GameProperties gameProps = new GameProperties();
int htmlPlayerNo = 0;
private List<Player> players = new ArrayList<Player>();
private int currPlayScore;
private int roll;
private boolean showStrike;
private int playerNo = 0;
@RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)
public String showForm(){
return "AddUser";
}
@RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)
public @ResponseBody JsonResponse addUser(@ModelAttribute(value="player") Player player, BindingResult result){
JsonResponse res = new JsonResponse();
ValidationUtils.rejectIfEmpty(result, "name", "Name can not be empty.");
if(!result.hasErrors()){
htmlPlayerNo++;
player.setHtmlPlayerNo(htmlPlayerNo);
players.add(player);
res.setStatus("SUCCESS");
res.setResult(players);
}else{
res.setStatus("FAIL");
res.setResult(result.getAllErrors());
}
return res;
}
@RequestMapping(value = "/play.htm", method = {RequestMethod.POST})
public String playPage(GameProperties gamePropsIn, ModelMap model) {
players.get(playerNo).setScore(currPlayScore);
players.get(playerNo).setRoll(roll +1);
gameProps.setRoll(roll);
model.addAttribute("players", players);
Player currPlay = players.get(playerNo);
int pins = gamePropsIn.getPins();
currPlay.getGame().roll(pins);
if (pins == 10) {
showStrike = true;
} else {
showStrike = false;
}
currPlayScore = currPlay.getGame().score();
roll = currPlay.getGame().getRoll();
model.addAttribute("roll", roll);
model.addAttribute("pins", pins);
if (playerNo < players.size()-1){
playerNo++;
}else{
playerNo = 0;
}
if (showStrike ) {
gameProps.setStrikeMessage("Well done, you hit a strike!");
} else {
gameProps.setStrikeMessage("");
}
return "play";
}
}
这是 play.jsp：
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Ajax-JQuery Bowling</title>
<script src="/ajaxbowlgame/js/jquery.js"></script>
<script type="text/javascript">
function rollBall() {
var pins = $('#pins').val();
$.ajax({
type: "POST",
url: "/ajaxbowlgame/play.htm",
data: "pins=" + pins,
success: function(response){
// we have the response
$('#pins').val('');
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<h2>Welcome players!</h2>
<table id = "playerslist">
<c:forEach var="player" items="${players}">
<tr><td>${player.htmlPlayerNo}:</td><td>${player.name}:</td><td id="plScore">${player.score}</td></tr>
</c:forEach>
</table>
<table>
<tr><td> Pins: </td><td> <input id="pins"><br/></td></tr>
<tr><td colspan="1"><input type="button" value="Roll" onclick="rollBall()"><br/></td></tr>
</table>
Roll: <span id="roll">0</span>
<h2> ${command.strikeMessage}</h2>
</body>
</html>