thymeleaf在js中使用问题

平安一生0708 2017-09-14 04:33:55

初学thymeleaf,在js中使用时遇到些问题。
发现在js中使用var name = [[${user.username}]];在浏览器会报错

可能是把中括号解析成数组了
在网上查了下，看到这种做法，

测试了之后发现，只要有这个<script th:inline="javascript">就可以正常解析var name = [[${user.username}]];替换与否不影响，特殊需求除外，但是，有个前提：js代码必须写在html里，不能写在js文件中外联
下面是真正的问题：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"

      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>

    <meta charset="UTF-8" />

    <title>demo--index</title>

    <link th:href="@{css/myCss.css}" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" th:src="@{js/jquery-3.2.1/jquery.js}"></script>

    <!--<script th:inline="javascript" th:src="@{js/index.js}" type="text/javascript"></script>-->

    <script th:inline="javascript" type="text/javascript">

        $(function (){

//            var name = /*[[${user.username}]]*/null;

             var name = [[${user.username}]];

            console.info("name="+name);

            console.info(name==undefined||name==null||name=="");



            if(name==undefined||name==null||name==""){

                console.info("修改前："+$("#msg").html());

                $("#msg").html("您还没有登陆，请点击<a href='/'>登陆</a>");

                console.info("修改后："+$("#msg").html());

            }



            $("#msg").show();

        });

    </script>

</head>

<body>



    <div id="msg" hidden="hidden">

        My first springBoot project<br/>

        恭喜<span th:text="${user.username}" class="span" id="username"></span>，登录成功

    </div>

</body>

</html>

下面是浏览器解析后的js代码部分：

结果如图：

js中 $("#msg").html("您还没有登陆，请点击<a href='/'>登陆</a>");并没有替换掉html代码，而是清空了
js是jquery3.2.1版本

...全文

17963 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

平安一生0708 2020-05-29

打赏
举报

引用 9 楼懵懵懂懂程序员的回复:

[quote=引用 8 楼平安一生0708 的回复:]
[quote=引用 7 楼 lijianan3354 的回复:]
test.js是外联js吧，我这里报找不到initForm（）方法。。。

是的，这个帖子就是为了解决外联js使用的问题[/quote]

我也遇到抽取共用js, 不能使用, 而且我要的是局部变量, 不是全局的![/quote]

你是要在不同的js文件中公用同一个变量吗？这个的话就应该是全局的呀，局部变量超出作用域是没办法访问到的。
如果是抽取公用方法的话，如果是需要使用同一个变量，建议是把变量作为方法的参数来传递！
不知道你的问题我理解的对不对

懵懵懂懂程序员 2020-04-28

打赏
举报

引用 8 楼平安一生0708 的回复:

[quote=引用 7 楼 lijianan3354 的回复:] test.js是外联js吧，我这里报找不到initForm（）方法。。。

是的，这个帖子就是为了解决外联js使用的问题[/quote] 我也遇到抽取共用js, 不能使用, 而且我要的是局部变量, 不是全局的!

平安一生0708 2019-07-16

打赏
举报

引用 7 楼 lijianan3354 的回复:

test.js是外联js吧，我这里报找不到initForm（）方法。。。

是的，这个帖子就是为了解决外联js使用的问题

lijianan3354 2018-12-24

打赏
举报

test.js是外联js吧，我这里报找不到initForm（）方法。。。

XFdb 2018-01-09

打赏
举报

非常棒！

平安一生0708 2017-12-21

打赏
举报

最下面代码少了一句：

var test = name;

平安一生0708 2017-12-21

打赏
举报

引用 2 楼 Jalon2015 的回复:

我也是，想写在外联的js文件中，但就是不行

我找到一个方法，就是在script里面把数据放到全局变量里，然后在外联js文件中使用

<script th:inline="javascript" type="text/javascript">
        // <![CDATA[
                var name = [[${name}]];
                //通过参数传递
                 initForm(name);
        // ]]>
    </script>
<script src="js/test.js" type="text/javascript" />

test .js::

function initForm(name){
.....
}
//也可以直接在test.js中使用name变量

汤圆学Java 2017-12-21

打赏
举报

引用 4 楼 jiangjieyang 的回复:

最下面代码少了一句：
var test = name;

可行。。

汤圆学Java 2017-12-12

打赏
举报

我也是，想写在外联的js文件中，但就是不行

平安一生0708 2017-09-15

打赏
举报

js中 $("#msg").html("您还没有登陆，请点击<a href='/'>登陆</a>");并没有替换掉html代码，而是清空了这个问题解决了，用 <![CDATA[]]就可以了，应该是'/'这里有特殊字符吧

// <![CDATA[
        $(function (){

            var name = /*[[${user.username}]]*/null;
//             var name = [[${user.username}]];
            console.info("name="+name);
            console.info(name==undefined||name==null||name=="");

            if(name==undefined||name==null||name==""){
                console.info("修改前："+$("#msg").html());

                $("#msg").html("您还没有登陆，请点击<a href='/'>登陆</a>");

                console.info("修改后："+$("#msg").html());
            }

            $("#msg").show();
        });
        // ]]>

不过，不能写在js文件中外联的问题还是没有解决