一、Jquery获取Model中的数据

1、将model中的值赋给hidden,然后Js获取隐藏域的值。

后台的实现:

@RequestMapping("/QEditorMod1")
public String QEditorMod1(ModelMap model){
model.addAttribute("staff_name","cxx" );
return "questionEditorTemplate/QEditorMod1";
}

前端值的获取

//将值赋给hidden域
<input type="hidden" th:value="${staff_name}" id="staff_name2"/>
//Js 获取hidden的隐藏域
var staff_name2=$("#staff_name2").val();

二、Thymeleaf 获取model中的值

2、访问model中的数据

//通过“${}”访问model中的属性

<div class="panel-body">
<span th:text="${singlePerson.name}"></span>
</div>

3、在javascript中访问model 目前没有发现此种方法的应用场景

<script th:inline="javascript">
var single = [[${singlePerson}]];
    //或(如果第一种方式不行使用第二种)
    //var single = '[[${singlePerson.name}]]';
console.log(single.name+"/"+single.age)
</script>

来源1:https://my.oschina.net/u/3421984/blog/1604188/
来源2:https://blog.csdn.net/qq_29072049/article/details/88642146

Js和Thymeleaf如何获取model中的值的更多相关文章

  1. arcgis js之点击获取featureLayer中的点

    arcgis js之点击获取featureLayer中的点 代码: this.view.on('click', (evt) => { let layer = this.map.findLayer ...

  2. VUE中获取url中的值

    如图:获取值 一:main.js中写入 const router = new VueRouter({ routes: [ { path: '/goodsinfo/:goodsId', componen ...

  3. 安卓Android控件ListView获取item中EditText值

    可以明确,现在没有直接方法可以获得ListView中每一行EditText的值. 解决方案:重写BaseAdapter,然后自行获取ListView中每行输入的EditText值. 大概算法:重写Ba ...

  4. ThinkPHP 获取配置文件中的值

    C('SPECIAL_USER'):获取配置文件中的值 存入数组

  5. 通过YAJL获取json中的值

    这里主要是举例说明一下假设通过yajl获取json中的值. 对于array和object来说,获取的方式略有不同,详细能够參考以下的代码. 我仅仅是从网上搜集信息.知道有这么一种方法.假设还有别的方法 ...

  6. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  7. Android控件ListView获取item中EditText值

    能够明白,如今没有直接方法能够获得ListView中每一行EditText的值. 解决方式:重写BaseAdapter,然后自行获取ListView中每行输入的EditText值. 大概算法:重写Ba ...

  8. React 修改获取state中的值

    14===> 修改state中的值 不能够直接修改 state = { num: 10 } 如 this.state.num+=12; 不能够直接修改 错误 通过 this.setState({ ...

  9. selenium+java:获取列表中的值

    selenium+java:获取列表中的值 (2011-08-23 17:14:48) 标签: 杂谈 分类: selenium 初步研究利用java+testNg框架下写selenium测试用例,今天 ...

随机推荐

  1. Linux 下权限的管理

    Linux 下权限的管理 我们都知道,Linux系统对于用户的权限管理是十分严格的. 那么,我们就来具体了解一下. 一. 用户 在Linux中按照类型用户分为两种:1.超级用户 2.普通用户 那么它们 ...

  2. Linux NameSpace (目录)

    1. User Namespace 详解 2. Pid Namespace 详解 3. Mnt Namespace 详解 4. UTS Namespace 详解 5. IPC Namespace 详解 ...

  3. 菜鸡的Java笔记 第十四 String 类常用方法

    /*String 类常用方法    将所有String类的常用方法全部记下来,包括方法名称,参数作用以及类型    一个成熟的编程语言,除了它的语法非常完善之外,那么也需要提供有大量的开发类库     ...

  4. Nginx支持WebSocket反向代理

    WebSocket是目前比较成熟的技术了,WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选择.其为HTML5的一部分,WebSocket相较于原来开发这类app的 ...

  5. [bzoj1146]网络管理

    发现是链上的问题,所以树链剖分发现要查询第k大,因为第k大不支持合并,所以要二分答案二分答案后相当于询问一些区间内大于某数的数个数,直接线段树套平衡树即可时间复杂度$o(nlog^{4}_n)$(跟$ ...

  6. HTML四种定位-固定定位

    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  7. Spring Cloud Gateway过滤器精确控制异常返回(实战,完全定制返回body)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 Spring Cloud Gateway应用 ...

  8. postman自动调用获取token

    Postman不光支持单次请求,还支持环境变量.全局变量.集合变量 本文使用Collection Variable Collection 如下图可以点击Collection然后可以添加请求和文件夹,以 ...

  9. uniapp中vuex的基本使用

    1. 创建一个uniapp项目 2. 在项目目录下用npm安装 vuex npm install vuex --save 3. 在项目根目录下创建 store文件夹,在store文件夹中创建 inde ...

  10. 各种多项式操作的 n^2 递推

    zszz,使用 NTT 可以在 \(\mathcal O(n\log n)\) 的时间内求出两个多项式的卷积.以及一个多项式的 \(\text{inv},\ln,\exp,\text{sqrt}\) ...