Question

我正在尝试使用jquery运行spring boot插件。打开页面时出现此错误：

出现意外错误（type = Internal Server Error，status = 500）。解析文档的异常：template =“test”，第79行 - 第5列

我几乎不了解Javascript，这是可疑的导致问题。

这是我的HTML：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>

    <title>Competition</title>
</head>
<body>
<div class="container">
    <h2>Competiton</h2>
    
    <script src="jquery-1.11.3.min.js"></script>
<script src="js/brackets.min.js"></script>

<div class="brackets">
</div>

     <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
        	 window.alert("sometext");
         

var rounds;

rounds = [


  //-- round 1
  [

      {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 211", ID: 211 }
      },

      {
        player1: { name: "Player 112", winner: true, ID: 112 },
        player2: { name: "Player 212", ID: 212 }
      },

      {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 213", ID: 213 }
      },

      {
        player1: { name: "Player 114", winner: true, ID: 114 },
        player2: { name: "Player 214", ID: 214 }
      },

      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 215", ID: 215 }
      },

      {
        player1: { name: "Player 116", winner: true, ID: 116 },
        player2: { name: "Player 216", ID: 216 }
      },

      {
        player1: { name: "Player 117", winner: true, ID: 117 },
        player2: { name: "Player 217", ID: 217 }
      },

      {
        player1: { name: "Player 118", winner: true, ID: 118 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],

  //-- round 2
  [

      {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 212", ID: 212 }
      },

      {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 214", ID: 214 }
      },

      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 216", ID: 216 }
      },

      {
        player1: { name: "Player 117", winner: true, ID: 117 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],

  //-- round 3
  [

      {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 113", ID: 113 }
      },

      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],

  //-- round 4
  [

      {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 218", winner: true, ID: 218 },
      },
  ],
  
  //-- Champion
  [

      {
        player1: { name: "Player 113", winner: true, ID: 113 },
      },
  ],

];   });

var titles = ['round 1', 'round 2', 'round 3', 'round 4', 'round 5'];

      
$(".brackets").brackets({
	  titles: titles,
	  rounds: rounds
	  // MORE OPTIONS HERE
	});
	
$(".brackets").brackets({
	  rounds: false,
	  titles: false,
	  color_title: 'black',
	  border_color: 'black',
	  color_player: 'black',
	  bg_player: 'white',
	  color_player_hover: 'black',
	  bg_player_hover: 'white',
	  border_radius_player: '0px',
	  border_radius_lines: '0px',
	});

</script>
  
</div>
</body>
</html>

Answer 1

试图设置此页面。以下代码对我有用。您必须看到调用jQuery函数的位置

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
    <title>Competition</title>
    <style>
    body { font-family:'Open Sans'; background-color:#34495E; color:#fff;}
    </style>
</head>
<body>
<div class="container">
    <h2>Competiton</h2>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="brackets.min.js"></script>
<link href="jquery.bracket.min.css" rel="stylesheet">
<div class="wrapper">

    <div class="brackets">
    </div>

</div>

     <script type = "text/javascript" language = "javascript">
var rounds;

rounds = [
      //-- round 1
  [

      {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 211", ID: 211 }
      },
      {
        player1: { name: "Player 112", winner: true, ID: 112 },
        player2: { name: "Player 212", ID: 212 }
      },
     {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 213", ID: 213 }
      },
      {
        player1: { name: "Player 114", winner: true, ID: 114 },
        player2: { name: "Player 214", ID: 214 }
      },
      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 215", ID: 215 }
      },
      {
        player1: { name: "Player 116", winner: true, ID: 116 },
        player2: { name: "Player 216", ID: 216 }
      },
      {
        player1: { name: "Player 117", winner: true, ID: 117 },
        player2: { name: "Player 217", ID: 217 }
      },
      {
        player1: { name: "Player 118", winner: true, ID: 118 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],

  //-- round 2
  [
     {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 212", ID: 212 }
      },
      {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 214", ID: 214 }
      },
      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 216", ID: 216 }
      },
      {
        player1: { name: "Player 117", winner: true, ID: 117 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],
  //-- round 3
  [

      {
        player1: { name: "Player 111", winner: true, ID: 111 },
        player2: { name: "Player 113", ID: 113 }
      },
      {
        player1: { name: "Player 115", winner: true, ID: 115 },
        player2: { name: "Player 218", ID: 218 }
      },
  ],
  //-- round 4
  [
      {
        player1: { name: "Player 113", winner: true, ID: 113 },
        player2: { name: "Player 218", winner: true, ID: 218 },
      },
  ],
  //-- Champion
  [
      {
        player1: { name: "Player 113", winner: true, ID: 113 },
      },
  ],
];   
var titles = ['round 1', 'round 2', 'round 3', 'round 4', 'round 5'];
(function($){
       $(".brackets").brackets({
            titles: titles,
            rounds: rounds,
            color_title: 'white',
            border_color: '#46CFB0',
            color_player: 'white',
            bg_player: '#46CFB0',
            color_player_hover: 'white',
            bg_player_hover: '#E95546',
            border_radius_player: '5px',
            border_radius_lines: '5px',
        });
 })(jQuery);
 </script>
</div>
</body>
</html>

在Spring启动中运行javascript Html页面时出错 - 异常解析文档

1 个答案: