javascript - 如何从 spring data jpa 将值打印到用户界面？

Question

我使用 spring boot 和 mysql 创建了一个团队和玩家休息服务。我想使用 javascript ajax 将其转移到用户体验。 玩家上来没有问题， 但团队却没有。 单击团队按钮后如何引入团队成员？ 我需要改变什么？

玩家

@Entity
@Table(name = "player")
public class Player{

    @Id
    @GeneratedValue
    @NotNull
    @Column
    private int id;

    @NotNull
    @Column
    private String playerName;

    @NotNull
    @Column
    private String playerSurname;

    @Column
    private int playerAge;



    public String getPlayerName() {
        return playerName;
    }

    public void setPlayerName(String playerName) {
        this.playerName = playerName;
    }

    public String getPlayerSurname() {
        return playerSurname;
    }

    public void setPlayerSurname(String playerSurname) {
        this.playerSurname = playerSurname;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getPlayerAge() {
        return playerAge;
    }

    public void setPlayerAge(int playerAge) {
        this.playerAge = playerAge;
    }  
}

团队

@Entity
@Table(name = "team")
public class Team {

    @Id
    @GeneratedValue
    @NotNull
    @Column
    private int id;

    @NotNull
    @Column
    private String teamName;

    @Column
    private String teamCountry;

    public Team(){
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getTeamName() {
        return teamName;
    }

    public void setTeamName(String teamName) {
        this.teamName = teamName;
    }

    public String getTeamCountry() {
        return teamCountry;
    }

    public void setTeamCountry(String teamCountry) {
        this.teamCountry = teamCountry;
    }

    @OneToOne
    private Player player;

    public Player getPlayer() {
        return player;
    }

    public void setPlayer(Player player) {
        this.player = player;
    }

}

Controller

@CrossOrigin(origins = "http://localhost:8000/")
@RestController
public class TeamController {
    @Autowired
    PlayerRepository playerRepository;
    @Autowired
    TeamRepository teamRepository;

    @RequestMapping("/")
    public void main() {

        //create players by manual
        Player messi = new Player();
        Player ronaldo = new Player();
        Player ozil = new Player();

        messi.setPlayerName("Lionel");
        messi.setPlayerSurname("Messi");
        messi.setPlayerAge(31);

        ronaldo.setPlayerName("Cristiano");
        ronaldo.setPlayerSurname("Ronaldo");
        ronaldo.setPlayerAge(32);

        ozil.setPlayerName("Mesut");
        ozil.setPlayerSurname("Ozil");
        ozil.setPlayerAge(29);

        this.playerRepository.save(messi);
        this.playerRepository.save(ronaldo);
        this.playerRepository.save(ozil);

        //create teams by manual    
        Team barcelona = new Team();
        Team juventus = new Team();
        Team arsenal = new Team();

        barcelona.setTeamName("Barcelona");
        barcelona.setTeamCountry("Spain");
        barcelona.setPlayer(messi);

        juventus.setTeamName("Juventus");
        juventus.setTeamCountry("Italy");
        juventus.setPlayer(ronaldo);

        arsenal.setTeamName("Arsenal");
        arsenal.setTeamCountry("England");
        arsenal.setPlayer(ozil);

        this.teamRepository.save(barcelona);
        this.teamRepository.save(juventus);
        this.teamRepository.save(arsenal);

    }   

    //**PLAYER**
    @GetMapping(value="/getAllPLayers")
    public List<Player> getAllPlayers(){
        return playerRepository.findAll();
    }

    @PostMapping(value="getPlayerByName")
    public List<Player> getPlayerByName(@RequestParam("playerName") String playerName){
        return playerRepository.findByPlayerName(playerName);
    }

    @PostMapping(value="getPlayerBySurname")
    public List<Player> getPlayerBySurname(@RequestParam("playerSurname") String playerSurname){
        return playerRepository.findByPlayerSurname(playerSurname);
    }   

    @PostMapping(value="getPlayerByAge")
    public List<Player> getPlayerByAge(@RequestParam("playerAge") int playerAge){
        return playerRepository.findByPlayerAge(playerAge);
    }   


    //**TEAM**
    @GetMapping(value="/getAllTeams")
    public List<Team> getAllTeams(){
        return teamRepository.findAll();
    }

    @PostMapping(value = "/getTeamsByName")
    public List<Team> getTeamByName(@RequestParam("teamName") String teamName){
        return teamRepository.findByTeamName(teamName);
    }

    @PostMapping(value = "/getTeamsByCountry")
    public List<Team> getTeamByCountry(@RequestParam("teamCountry") String teamCountry){
        return teamRepository.findByTeamCountry(teamCountry);
    }


}

Ajax 请求

$( document ).ready(function() {

    $("#getAllTeams").click(function(event){
        event.preventDefault();
        ajaxGet(); 
    });

    function ajaxGet(){
        $.ajax({
            type : "GET",
            url :  "http://localhost:8080/getAllTeams/",
            dataType : 'json', 
            contentType:'application/x-www-form-urlencoded',

            success: function(result){
                alert("Teams loaded!");
                $('#getResultDiv2 ul').empty();
                var tableTitle = "<h2><strong>Team List</strong></h2>";
                var teamList = "<table border='1'>";
                teamList += "<tr><td><strong>Team Name</strong></td><td><strong>Team Country</strong></td><td><strong>Player Name</strong></td><td><strong>Player Surname</strong></td><td><strong>Player Age</strong></td></tr>";

                $.each(result, function(i, teams){
                    teamList +="<tr>";
                    teamList +="<td>"+teams.teamName +"</td>";
                    teamList +="<td>"+teams.teamCountry+"</td>";
                    teamList +="<td>"+teams.playerList[i]["playerName"]+"</td>";
                    teamList +="<td>"+teams.playerList[i]["playerSurname"]+"</td>";
                    teamList +="<td>"+teams.playerList[i]["playerAge"]+"</td>";
                    teamList +="</tr>";
                });
                teamList +="</table>";
                $('#getResultDiv2').append(tableTitle, teamList)
                console.log("Success: ", result);
        },
            error : function(e) {
                $("#getResultDiv2").html("<strong>Error</strong>");
                console.log("ERROR: ", e);
            }
        }); 
    }
})

HTML

        <!-- Players --> 
    <h3 style="color: darkolivegreen" ><strong>Team System</strong></h3>
  <div class="col-sm-7" style="margin:20px 0px 20px 0px">
      <button id="getAllPlayers">Get Players</button>
      <button id="getAllTeams">Get Teams</button>
      <div id="getResultDiv1" style="padding:20px 10px 20px 50px">
            <ul class="list-group">
          </ul>
        </div>
        <!-- Teams -->
        <div id="getResultDiv2" style="padding:20px 10px 20px 50px">
          <ul class="list-group">
        </ul>
      </div>

      </div>
    </div>
  </div>
 <!-- *** --> 

我与您分享我的错误日志:

这是错误日志的另一个网址: https://pasteboard.co/IqdScuY.png

Answer 1

  $.each(result, function(i, teams){
                    teamList +="<tr>";
                    teamList +="<td>"+teams.teamName +"</td>";
                    teamList +="<td>"+teams.teamCountry+"</td>";
                    teamList +="<td>"+teams.player.playerName+"</td>";
                    teamList +="<td>"+teams.player.playerSurname+"</td>";
                    teamList +="<td>"+teams.player.playerAge+"</td>";
                    teamList +="</tr>";
                });