Thymeleaf 获取model中的值和JS获取Model中的数据

简介: Thymeleaf 获取model中的值和JS获取Model中的数据

json

{
    "id": 82,
    "workNumber": "M202105241431",
    "issueNumber": "202105241431",
    "workName": "99999",
    "beginTime": "2021-05-24 14:31:00",
    "endTime": "2021-05-24 14:31:00",
    "proposer": "9999999",
    "applyTime": "2021-05-24 14:31:00",
    "type": 1,
    "fenceId": "202105241537",
    "ids": null,
    "deviceIds": null,
    "contractorId": null,
    "pageBean": {
        "page": 1,
        "rows": 1,
        "total": 0,
        "pagination": false
    },
    "organId": 0,
    "fence": {
        "fid": "c400950fbbcc46e0aad3ab2c1527f4bf",
        "name": null,
        "polygon": "POLYGON((108.609408309177 21.7154145609395,108.609416256597 21.7154225081542,108.609424203689 21.7154145609395,108.609408309177 21.7154145609395))",
        "geom": null,
        "placeId": "97",
        "buildingId": 1,
        "floorId": "01",
        "lonLats": [
            [108.609408309177, 21.7154145609395],
            [108.609416256597, 21.7154225081542],
            [108.609424203689, 21.7154145609395],
            [108.609408309177, 21.7154145609395]
        ]
    }
};

1:Thymeleaf 获取model中的值

访问model中的数据

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

<input type="text" id="id" hidden="true" th:value="${workDetail.id}" />
<input type="text" th:value="${workDetail.workNumber}" id="workNumber"></input>
<input type="text" th:value="${workDetail.issueNumber}" id="issueNumber">
<input type="text" th:value="${workDetail.workName}" id="workName"></input>

2:JS获取Model中的数据

<script th:inline="javascript">
        var a = [[${workDetail}]];
        var b = [[${workDetail.id}]];
        var c = [[${workDetail.workNumber}]];
        var d = [[${workDetail.issueNumber}]];
        var e = [[${workDetail.workName}]];
        var f = [[${workDetail.fence.lonLats}]];
</script>

var a = {"id":82,"workNumber":"M202105241431","issueNumber":"202105241431","workName":"99999","beginTime":"2021-05-24 14:31:00","endTime":"2021-05-24 14:31:00","proposer":"9999999","applyTime":"2021-05-24 14:31:00","type":1,"fenceId":"202105241537","ids":null,"deviceIds":null,"contractorId":null,"pageBean":{"page":1,"rows":1,"total":0,"pagination":false},"organId":0,"fence":{"fid":"c400950fbbcc46e0aad3ab2c1527f4bf","name":null,"polygon":"POLYGON((108.609408309177 21.7154145609395,108.609416256597 21.7154225081542,108.609424203689 21.7154145609395,108.609408309177 21.7154145609395))","geom":null,"placeId":"97","buildingId":1,"floorId":"01","lonLats":[[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]]}};
        var b = 82;
        var c = "M202105241431";
        var d = "202105241431";
        var e = "99999";
        var f = [[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]];
        var g = '[[108.609408309177,21.7154145609395],[108.609416256597,21.7154225081542],[108.609424203689,21.7154145609395],[108.609408309177,21.7154145609395]]';
相关文章
|
19天前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
60 0
|
19天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
19天前
|
存储 前端开发 JavaScript
JavaScript 中的 BLOB 数据结构的使用介绍
JavaScript 中的 BLOB 数据结构的使用介绍
68 1
|
19天前
|
JSON JavaScript 前端开发
JavaScript 如何对 JSON 数据进行冒泡排序?
JavaScript 如何对 JSON 数据进行冒泡排序?
55 0
|
19天前
|
JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:二、使用数据构建抽象
NUS CS1101S:SICP JavaScript 描述:二、使用数据构建抽象
33 0
|
18天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
25 0
|
8天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
11天前
|
JavaScript 小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
18天前
|
前端开发 JavaScript 算法
JavaScript 中实现常见数据结构:栈、队列与树
JavaScript 中实现常见数据结构:栈、队列与树
|
19天前
|
存储 JSON JavaScript
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
17 0