在 Spring Boot 中运行 javascript Html 页面时出错 - 异常解析文档答案

【问题标题】：Error running javascript Html pages in Spring boot - Exception parsing document在 Spring Boot 中运行 javascript Html 页面时出错 - 异常解析文档
【发布时间】：2018-01-29 22:19:16
【问题描述】：

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

出现意外错误（类型=内部服务器错误，状态=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>

【问题讨论】：

标签： javascript spring spring-boot thymeleaf

【解决方案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>

【讨论】：

嘿，我试过你的代码，但我得到“异常解析文档：模板 =“测试”，第 130 行 - 第 3 列“你能详细说明你的意思吗？你必须看到 jquery 函数所在的位置调用？
我看到您正在使用百里香叶。默认情况下，Thymeleaf 要求 html 是有效的 XML。您能否确保所有 html 标记都已正确关闭？在我的示例中，我看到 <link href="jquery.bracket.min.css" rel="stylesheet"> 没有结束 </link> 标记。我通过参考this 示例来做到这一点。看看他们在哪里调用了(function($){})(jQuery) 函数。