thymeleaf 将后端绑定数据直接传递js变量
根据自我需求,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变量的更多相关文章
- Mvc_前后端绑定数据json集合
ViewBag.SysModuleList =new List<SysModule>(){.....}; var data = @Html.Raw(Json.Encode(ViewBag ...
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...
- Thymeleaf前后端传值 页面取值与js取值
参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...
- 让前端独立于后端进行开发,模拟数据生成器Mock.js
让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...
- D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
- easyUI之datagrid绑定后端返回数据的两种方式
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
- D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据
D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...
随机推荐
- Nginx入门(二):镜像和容器
0.docker常用命令 #镜像名 版本标签 镜像id 创建时间 镜像大小 REPOSITORY TAG IMAGE ID CREATED SIZE hello-world latest fce289 ...
- rocketmq 部署启动指南-Docker 版
最近学习使用 rocketmq,需要搭建 rocketmq 服务端,本文主要记录 rocketmq 搭建过程以及这个过程踩到的一些坑. 准备工作 在搭建之前,我们需要做一些准备工作,这里我们需要使用 ...
- 证书pfx转jks
keytool -importkeystore -srckeystore 2756649_order.hanels-home.com.pfx -srcstoretype pkcs12 -destke ...
- Python数据分析之Pandas读写外部数据文件
1 引言 数据分析.数据挖掘.可视化是Python的众多强项之一,但无论是这几项中的哪一项都必须以数据作为基础,数据通常都存储在外部文件中,例如txt.csv.excel.数据库.本篇中,我们来捋一捋 ...
- Codeforces Round #383 (Div. 2)D. Arpa's weak amphitheater and Mehrdad's valuable Hoses(dp背包+并查集)
题目链接 :http://codeforces.com/contest/742/problem/D 题意:给你n个女人的信息重量w和美丽度b,再给你m个关系,要求邀请的女人总重量不超过w 而且如果邀请 ...
- 【Windows】PostgreSql安装
Installer安装包问题 Problem running post-install step. Installation may not complete correctly. The datab ...
- 【Nginx】 中的配置命令
一.location 1.1 概述 1.2 location的语法 1.3 Location正则案例 二.nginx rewrite 2.1 rewrite全局变量 2.2 判断IP地址来源 2.3 ...
- MySQL 数据库出现导入xls数据出现1062主从错误错误问题解决方案
今天把xls数据表导入MySQL数据库时发现出现1062错误 ,并且有20-700条数据一直导入不了所以开始找解决方案. 解决方案1: 数据库表设计问题导致相同字段的重复数据不能导入 解 ...
- Go语言标准库之net_http
Go语言内置的net/http包十分的优秀,提供了HTTP客户端和服务端的实现. net/http介绍 Go语言内置的net/http包提供了HTTP客户端和服务端的实现. HTTP协议 超文本传输协 ...
- 洛谷 P1181数列分段Section I
星爆气流(弃疗)斩! ——<刀剑神域> 题目:https://www.luogu.org/proble ...