Fatal编程技术网
  • java/
  • Java jquery更新表值

Java jquery更新表值

java jquery ajax spring

Java jquery更新表值,java,jquery,ajax,spring,Java,Jquery,Ajax,Spring,我有一个保龄球游戏的应用程序。球员的名字和他们的分数一起列出。按下“滚动”按钮时，分数将更新。问题是，除非刷新页面，否则更新的分数不会出现在屏幕上 如果有人能帮忙，我将非常感激 这是主播放页面的外观： Welcome players! 1: John: 0 2: Mark: 0 3: Paolo: 0 Pins : Roll: 0 这是UserController.java文件： package ajaxbowlgame; import java.util.

我有一个保龄球游戏的应用程序。球员的名字和他们的分数一起列出。按下“滚动”按钮时，分数将更新。问题是，除非刷新页面，否则更新的分数不会出现在屏幕上

如果有人能帮忙，我将非常感激

这是主播放页面的外观：

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";              
}   
}

打包游戏；
导入java.util.ArrayList；
导入java.util.List；
导入org.springframework.stereotype.Controller；
导入org.springframework.ui.ModelMap；
导入org.springframework.validation.BindingResult；
导入org.springframework.validation.ValidationUtils；
导入org.springframework.web.bind.annotation.ModelAttribute；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
导入org.springframework.web.bind.annotation.ResponseBody；
@控制器
公共类用户控制器{
GameProperties gameProps=新的GameProperties（）；
int htmlPlayerNo=0；
private List players=new ArrayList（）；
私人智力测验成绩；
私人整数滚动；
私人罢工；
私有int playerNo=0；
@RequestMapping（value=“/AddUser.htm”，method=RequestMethod.GET）
公共字符串showForm（）{
返回“AddUser”；
}
@RequestMapping（value=“/AddUser.htm”，method=RequestMethod.POST）
public@ResponseBody JsonResponse addUser（@modeldattribute（value=“player”）player-player，BindingResult）{
JsonResponse res=新的JsonResponse（）；
ValidationUtils.rejectIfEmpty（结果“名称”，“名称不能为空”）；
如果（！result.hasErrors（））{
htmlPlayerNo++；
player.setHtmlPlayerNo（htmlPlayerNo）；
players.add（player）；
res.setStatus（“成功”）；
res.setResult（玩家）；
}否则{
res.setStatus（“失败”）；
res.setResult（result.getAllErrors（））；
}
返回res；
}
@RequestMapping（value=“/play.htm”，method={RequestMethod.POST}）
公共字符串播放页面（GameProperties gamePropsIn，ModelMap模型）{
玩家.get（playerNo）.setScore（currPlayScore）；
玩家.get（玩家号）.setRoll（roll+1）；
游戏道具。设置滚动（滚动）；
model.addAttribute（“玩家”，玩家）；
Player currPlay=players.get（playerNo）；
int pins=gamePropsIn.getPins（）；
currPlay.getGame（）.roll（pins）；
如果（引脚==10）{
showStrike=true；
}否则{
showStrike=false；
}
currPlayScore=currPlay.getGame（）.score（）；
roll=currPlay.getGame（）.getRoll（）；
model.addAttribute（“滚动”，滚动）；
model.addAttribute（“pins”，pins）；
如果（playerNo
这是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>


ajaxjquery保龄球
函数rollBall（）{
var pins=$（'#pins'）.val（）；
$.ajax({
类型：“POST”，
url:“/ajaxbowlgame/play.htm”，
数据：“引脚=”+引脚，
成功：功能（响应）{
//我们得到了答复
$（'#pins'）.val（''）；
},  
错误：函数（e）{
警报（'错误：'+e）；
}  
});
}
欢迎玩家！
${player.htmlPlayerNo}:${player.name}:${player.score}
引脚：



滚动：0
${command.strikeMessage}
当你掷球时，你调用
play.html
。当该调用完成时，您只需清除
#pins
。这是你必须更新分数的地方；在
success
回调时。

我想知道怎么做。我尝试替换表格，但我不知道如何获得更新版本。您需要确保
playPage
返回您需要的所有信息。我不知道你的
模型和视图是什么样子。您可以在回调中以
response
的形式访问它；将其记录到控制台以进行检查。获得数据后，您将能够访问
$（'#playerslist tr'）.eq（indexOfRowToUpdate）.find（'td:last'）.text（newPoints）好的，谢谢，我该如何获取数据？我假设“newPoints”是来自响应的数据？@jchoran:是的，
newPoints
将从
response
参数中检索。您需要确保您的
playPage
方法生成您希望在回调中使用的所有信息。将响应记录到控制台以检查它。我不知道这是否有多大区别，但我注意到最后第二个返回语句，返回模型和视图，是错误的。它实际上被注释掉了，但这并没有显示在本页上。唯一使用的return语句是“return”play“。顺便说一句，这并不是真正的“游戏”，因为敲打的PIN是从键盘输入到上面PIN标签旁边的文本字段（不可见）。