使用thymleaf时在js中取值问题

使用thymleaf时在js中取值问题

原创 qq_33732754 发布于2018-11-30 15:26:39 阅读数 863 收藏

更新于2018-11-30 15:26:39

分类专栏： 前端 thymleaf

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_33732754/article/details/84652689

展开

最近在使用springboot+thymleaf做项目，在使用thymleaf遇到了一些问题，记录一下。

问题一

使用thymleaf时，在js代码中取后台返回的值时，通常使用[[]${返回名称}]，当返回值是一个字符串的时候是没有问题的，但是如果返回值是一个对象，通过这种凡是取出来的是一个字符串，会导致对象中的值取不出来。

例如：返回的user是一个对象，可以这样取值：var user = [[${user}]]；取值之后打印出来的数据看似没有问题，是一个json对象，但是如果想通过user.username取出这个字段的名字就会失败，因为user是一个字符串，是不能这样处置的。查了一个资料，没有找到thymleaf中可以在js中直接取出对象的方法，只能将user转成对象，如下：

var user =JSON.parse( [[${user}]])；

通过这种将字符串转成对象的方式，可以实现user.username的取值方式。

问题二

js中如果使用&&符或者在js中拼接路径的时候使用&时，thymleaf并不支持这些特殊符号。解决方案为如下：

<script th:inline="javascript">
    /*<![CDATA[*/           
            if(usercode == "" || usercode==null){
                redirectUrl = location.href + "&usercode=1";
            }
      /*]]>*/
    </script>

如代码中所示，在加入/*<![CDATA[*/......... /*]]>*/这个标签后，就可以在js使用任何特殊字符了。

问题三

在jsp改造为html时，类似<c:if></c:if>标签包含的字段，遇到这种情况，如果用<span>，或者<div>等标签，可能会有自己不想要的样式，导致样式混乱。通常这时候可以使用一下thymleaf特有的标签<th:block></th:block>，这个标签是没有样式的，很多情况下都可以满足。

 

•                     <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#csdnc-thumbsup"></use>
                      </svg><span class="name">点赞</span>
                      <span class="count"></span>
                      </a></li>
                      <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-Collection-G"></use>
                      </svg><span class="name">收藏</span></a></li>
                      <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-fenxiang"></use>
                      </svg>分享</a></li>
                      <!--打赏开始-->
                                              <!--打赏结束-->
                                              <li class="tool-item tool-more">
                          <a>
                          <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                          </a>
                          <ul class="more-box">
                              <li class="item"><a class="article-report">文章举报</a></li>
                          </ul>
                      </li>
                                          </ul>
              </div>
                          </div>
          <div class="person-messagebox">
              <div class="left-message"><a href="https://blog.csdn.net/qq_33732754">
                  <img src="https://profile.csdnimg.cn/6/0/B/3_qq_33732754" class="avatar_pic" username="qq_33732754">
                                          <img src="https://g.csdnimg.cn/static/user-reg-year/2x/4.png" class="user-years">
                                  </a></div>
              <div class="middle-message">
                                      <div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_33732754" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">qq_33732754</a></span>
                                          </div>
                  <div class="text"><span>发布了2 篇原创文章</span> · <span>获赞 0</span> · <span>访问量 1294</span></div>
              </div>
                              <div class="right-message">
                                          <a href="https://im.csdn.net/im/main.html?userName=qq_33732754" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                      </a>
                                                          <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                  </div>
                          </div>
                  </div>
  </article>