根据自我需求,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. Nginx入门(二):镜像和容器

    0.docker常用命令 #镜像名 版本标签 镜像id 创建时间 镜像大小 REPOSITORY TAG IMAGE ID CREATED SIZE hello-world latest fce289 ...

  2. rocketmq 部署启动指南-Docker 版

    最近学习使用 rocketmq,需要搭建 rocketmq 服务端,本文主要记录 rocketmq 搭建过程以及这个过程踩到的一些坑. 准备工作 在搭建之前,我们需要做一些准备工作,这里我们需要使用 ...

  3. 证书pfx转jks

    keytool -importkeystore -srckeystore  2756649_order.hanels-home.com.pfx -srcstoretype pkcs12 -destke ...

  4. Python数据分析之Pandas读写外部数据文件

    1 引言 数据分析.数据挖掘.可视化是Python的众多强项之一,但无论是这几项中的哪一项都必须以数据作为基础,数据通常都存储在外部文件中,例如txt.csv.excel.数据库.本篇中,我们来捋一捋 ...

  5. 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 而且如果邀请 ...

  6. 【Windows】PostgreSql安装

    Installer安装包问题 Problem running post-install step. Installation may not complete correctly. The datab ...

  7. 【Nginx】 中的配置命令

    一.location 1.1 概述 1.2 location的语法 1.3 Location正则案例 二.nginx rewrite 2.1 rewrite全局变量 2.2 判断IP地址来源 2.3 ...

  8. MySQL 数据库出现导入xls数据出现1062主从错误错误问题解决方案

    今天把xls数据表导入MySQL数据库时发现出现1062错误    ,并且有20-700条数据一直导入不了所以开始找解决方案. 解决方案1:   数据库表设计问题导致相同字段的重复数据不能导入   解 ...

  9. Go语言标准库之net_http

    Go语言内置的net/http包十分的优秀,提供了HTTP客户端和服务端的实现. net/http介绍 Go语言内置的net/http包提供了HTTP客户端和服务端的实现. HTTP协议 超文本传输协 ...

  10. 洛谷 P1181数列分段Section I

    星爆气流(弃疗)斩!                                            ——<刀剑神域> 题目:https://www.luogu.org/proble ...