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]]';
相关文章
|
3月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
3月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
154 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
4月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
76 4
|
4月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
53 7
|
4月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
82 0
|
4月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
5月前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
5月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
139 11
|
6月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
85 0
|
6月前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
156 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57