根据自我需求,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. MSIL实用指南-生成异常处理

    本篇讲解怎么生成异常.C# 异常处理时建立在四个关键词之上的:try.catch.finally 和 throw. 一.异常的抛出抛出异常在C#语言中要使用throw关键字,使用方法是throw &l ...

  2. sql建表经验总结——主要是建表现象

    在建表方面你都有哪些感悟? 见过的建表的一些现象: 1,一对多业务,有时候在主表见一个字段xxIds,然后存多表的id,多个英文逗号隔开,不知道这样好不好? 2,大部分字段建成varchar(50), ...

  3. 深度好文,springboot启动原理详细分析

    我们开发任何一个Spring Boot项目,都会用到如下的启动类 1 @SpringBootApplication 2 public class Application { 3 public stat ...

  4. 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II (BFS + DP +多开一维)

    hihocoder 1828 :https://hihocoder.com/problemset/problem/1828 学习参考:https://www.cnblogs.com/tobyw/p/9 ...

  5. CodeForces 592D Super M DP

    Super M 题解: 定义 dp[u][0] 为遍历完u中的所有节点, 但不回到u点的路径花费值. 定义 dp[u][1] 为遍历完u中的所有节点, 且要回到u点的路径花费值. 转移方程. dp[u ...

  6. codeforces 808 D. Array Division(二分)

    题目链接:http://codeforces.com/contest/808/problem/D 题意:有一串长度为n的数组,要求选择一个数字交换它的位置使得这串数能够分成两串连续的和一样的数组. 这 ...

  7. 分析一次double强转float的翻车原因

    背景 人逢喜事精神爽,总算熬到下班撩~~ 正准备和同事打个招呼回家,被同事拖住问了.

  8. PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、

    异步对象 a)创建异步对象 b)设置请求的url等参数 c)  发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容 布尔类型不能直接用echo输出 常见的响应状态 Ajax概 ...

  9. 【LeetCode】34-在排序数组中查找元素的第一个和最后一个位置

    题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值 ...

  10. Java 并发编程(二):如何保证共享变量的原子性?

    线程安全性是我们在进行 Java 并发编程的时候必须要先考虑清楚的一个问题.这个类在单线程环境下是没有问题的,那么我们就能确保它在多线程并发的情况下表现出正确的行为吗? 我这个人,在没有副业之前,一心 ...