根据自我需求,thymeleaf可以直接将后端数据传递给js中进行使用,例如:

1.后端接口数据:

@Controller
public class TestController {
@RequestMapping(value = "test", method = RequestMethod.GET)
public String test(Model model) {
model.addAttribute("test", "hello");
return "index";
}
}

利用thymeleaf将其传递给js使用:

<script th:inline="javascript">

    var test= [[${test}]];
console.log(test); </script>

注:[[…]]之间的内容可以被赋值。为了使其生效,必须在此标签或者任何父标签上有th:inline属性。此属性有三种值(text , javascript and none)

thymeleaf 将后端绑定数据直接传递js变量的更多相关文章

  1. Mvc_前后端绑定数据json集合

    ViewBag.SysModuleList =new  List<SysModule>(){.....}; var data = @Html.Raw(Json.Encode(ViewBag ...

  2. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  3. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  4. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  5. Thymeleaf前后端传值 页面取值与js取值

    参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...

  6. 让前端独立于后端进行开发,模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  7. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  8. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

  9. D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

随机推荐

  1. Leetcode之深度优先搜索&回溯专题-980. 不同路径 III(Unique Paths III)

    Leetcode之深度优先搜索&回溯专题-980. 不同路径 III(Unique Paths III) 深度优先搜索的解题详细介绍,点击 在二维网格 grid 上,有 4 种类型的方格: 1 ...

  2. [Python] socket实现TFTP上传和下载

    一.说明 本文主要基于socket实现TFTP文件上传与下载. 测试环境:Win10/Python3.5/tftpd64. tftpd下载:根据自己的环境选择下载,地址 :http://tftpd32 ...

  3. hdu 2615 Division(暴力)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2615 题解:挺简单的暴力枚举,小小的分治主要是看没人写题解就稍微写一下 #include <io ...

  4. codeforces 361 C. Levko and Array Recovery(暴力+思维)

    题目链接:http://codeforces.com/contest/361/problem/C 题意:对一个数列有这么两个操作 1.(1,l,r,p)..将区间[l,r]所有数都加上p 2.(2,l ...

  5. 前端利器躬行记(4)——webpack进阶

    webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map.模块热替换.集成等,本文会对这些内容做依次讲解. 一. runtime和manifest ...

  6. Sublime配置Python & sublime操作

    前言 前几天我发了一个配置C++的博客,今天再给大家掏一掏Python如何配置.但是主要是操作,文件并没有很多. 正文 文件地址:python 提取码:3gb7 先全部解压,sublime就按照上面说 ...

  7. Java 字符串常量存放在堆内存还是JAVA方法区?

    JDK1.7 及之后版本的 JVM 已经将运行时常量池从方法区中移了出来,在 Java 堆(Heap)中开辟了一块区域存放运行时常量池. JDK1.8开始,取消了Java方法区,取而代之的是位于直接内 ...

  8. 湘潭大学oj循环1-5

    #include <stdio.h>#include <stdlib.h> int main(){   int b,s,n;    int a[101]; A:scanf(&q ...

  9. hdu 1007 Quoit Design 题解

    原题地址 题目大意 查询平面内最近点对的距离,输出距离的一半. 暴力做法 枚举每一个点对的距离直接判断,时间复杂度是 $ O(n^2) $,对于这题来说会超时. 那么我们考虑去优化这一个过程,我们在求 ...

  10. jquery插件之poshytip

    Poshy Tip 是一个强大的jQuery 工具提示插件,拥有不同的外观.作为 Form Tooltips使用时,可以自定义气泡出现的位置. 导入插件: <script type=" ...