如何交互和重新加载Javascript？_Javascript_Spring Boot_Thymeleaf

如何交互和重新加载Javascript？

javascript spring-boot

如何交互和重新加载Javascript？,javascript,spring-boot,thymeleaf,Javascript,Spring Boot,Thymeleaf,在没有页面刷新的情况下，我调用一个ajax请求，该请求将发送到控制器并带来一个Thymeleaf片段在单击按钮时，我使用ajax请求控制器获取片段。每次我单击按钮时，都会调用相同的片段，但使用不同的标记innerHTML <div id="express" th:fragment="Display"> <p id="app">Include details about your goals</p>

在没有页面刷新的情况下，我调用一个ajax请求，该请求将发送到控制器并带来一个Thymeleaf片段

在单击按钮时，我使用ajax请求控制器获取片段。每次我单击按钮时，都会调用相同的片段，但使用不同的

标记

innerHTML

<div id="express" th:fragment="Display">
<p id="app">Include details about your goals</p>
</div>

假设您有一个HTML页面，其中包含您的JS文件，或者您直接在

标记中添加了JS。类似于

<!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();

});

$（函数（）{
函数my_load_函数（）{
//你在这里办理装货手续吗
//例如，我刚刚复制了您的内联代码。。。
让comp=document.getElementById（“app”）.innerHTML；
设struct=comp.split（“”）；
document.getElementById（“app”）.innerHTML=struct.reduce（（acc、word、index）=>{
返回`${acc}${word}`；
}, "");
}
函数my\u do\u something\u other\u函数（）{
//这里还有别的吗
}
常量handleClick=（）=>{
axios.post（url）
。然后（响应=>{
console.log（response.data）；
//什么是“$ReceiveDHTML”？它应该是response.data吗？；
//艾威，你说替换是有效的；
$（“#快递”）。替换为（$ReceiveDHTML）；
//在此之后，再次调用任何函数
我的加载函数（）；
my_do_something_other_function（）；
})
.catch（错误=>{
console.log（错误）；
});
};
//第一次调用加载函数
我的加载函数（）；
});

我在JS代码的注释中添加了额外的解释。请注意，我只是直接用SO写的，甚至没有试着运行，所以可能有一些打字错误。

我不知道为什么这个问题投票率这么高，没有什么特别的，也与“spring boot”或“thymeleaf”无关，只是普通的JS（jQuery）问题。您需要在主页上加载JS函数。当ajax完成并替换内容时，它将在DOM中可用，因此只需在

replaceWith

之后调用所需的函数即可。您能给出一个小例子吗？我想要的是，当一个新片段被以前的片段替换时，我的js应该被重新加载OK，给我几分钟时间，我会编一些例子，但我需要将其作为答案（注释部分没有足够的空间）。这个答案不会回答您的直接问题“如何重新加载js？”。正如我所说，你根本不需要这样做，相反，jS函数应该在主页上可用，你只需要调用它就可以了。好的，非常感谢@Slava Ivanov，让我试试这些步骤

$(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();

});