Thymeleaf - 如何交互和重新加载 Javascript？
Posted
技术标签:
【中文标题】Thymeleaf - 如何交互和重新加载 Javascript？【英文标题】：Thymeleaf - How to interact and reload Javascript? 【发布时间】：2021-02-05 09:21:21 【问题描述】：在没有页面刷新的情况下，我正在调用一个 ajax 请求，该请求会到达控制器并带来一个 Thymeleaf 片段，
单击按钮时，我请求使用 ajax 的控制器获取片段。每次我点击按钮时，都会调用相同的片段，但使用不同的<p> 标签innerhtml。
<div id="express" th:fragment="Display">
<p id="app">Include details about your goals</p>
</div>
js第一次效果很好，拆分成数组并添加span标签，但是动态替换新内容的问题。
当<p> 标记内具有不同innerHTML 的新片段出现在javascript 方面时，问题出在javascript 方面，Javascript 不起作用。我需要刷新页面重新运行我不想刷新的js。
这里是js
let comp = document.getElementById("app").innerHTML;
let struct = comp.split(" ");
document.getElementById("app").innerHTML = struct.reduce((acc, word, index) =>
return `$acc <span class="word">$word</span>`;
, "");
const handleClick = () =>
axios.post(url)
.then(response =>
console.log(response.data);
$("#express").replaceWith($recievedHTML);
)
.catch(error =>
console.log(error);
);
【问题讨论】：
我不确定为什么这个问题的投票率如此之高，没有什么特别的，与“spring-boot”或“thymeleaf”无关，只是普通的 JS (jQuery) 问题。您需要将 JS 函数与主页一起加载。当 ajax 完成并且你替换了你的内容时，它将在 DOM 中可用，所以只需在replaceWith 之后调用你需要的函数。
你能举个小例子吗？我想要的是当一个新片段被以前的片段替换时，我的 js 应该重新加载
好的，给我几分钟我会做一些例子，但我需要把它当作答案（评论部分没有足够的空间）。这个答案不会回答您的直接问题“如何重新加载 js？”。正如我所说，您根本不需要这样做，而是应该在主页中提供 jS 函数，您只需要调用它即可。
【参考方案1】：
假设您有您的 HTML 页面，其中包含您的 JS 文件，或者您已将 JS 直接添加到 <script> 标记中。有点像...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script src="/path/lib/jquery/3.5.1/jquery.min-dc5e7f18c8d36ac1d3d4753a87c98d0a.js" type="text/javascript"></script>
<script src="/path/js/your_file.min-cf4fcae72d4468307341eac1012bb6d8.js" type="text/javascript"></script>
</head>
<body>
<div id="express" th:fragment="Display">
<p id="app">Include details about your goals</p>
</div>
</body>
</html>
此页面的 Javascript 可能看起来像 ...
$(function()
function my_load_function()
// do your loading procedures here
// for example I just copied your inline code...
let comp = document.getElementById("app").innerHTML;
let struct = comp.split(" ");
document.getElementById("app").innerHTML = struct.reduce((acc, word, index) =>
return `$acc <span class="word">$word</span>`;
, "");
function my_do_something_else_function()
// dosomething else over here
const handleClick = () =>
axios.post(url)
.then(response =>
console.log(response.data);
// what is '$recievedHTML'? should it be response.data?;
// ayway, you said replacement works;
$("#express").replaceWith($recievedHTML);
// after this call any function again
my_load_function();
my_do_something_else_function();
)
.catch(error =>
console.log(error);
);
;
// call your loading function first time
my_load_function();
);
我已经在 JS 代码的 cmets 中添加了我的补充说明。请注意，我只是直接在SO中写的，甚至没有尝试运行，所以可能有一些错别字。
【讨论】：
好的，非常感谢@Slava Ivanov，让我试试这些步骤以上是关于Thymeleaf - 如何交互和重新加载 Javascript？的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC：如何在每个 Thymeleaf 页面上重新加载数据库中的登录用户信息？
Netbeans 8 不会重新加载静态 Thymeleaf 文件
thymeleaf 片段渲染后重新加载 javascript
Java 列表项在页面重新加载时重新添加到 thymeleaf 下拉列表中，多次出现