JavaScript - thymeleaf 在 js 中渲染的一个问题
可能只是一个小小的问题。。。虽然解决了。但真的有点吐了。
嘛,可能标题取叫 「spring boot ajax 发送 post 方法报 500 状态码,put 方法报405 状态码错误」 更能让遇到相同问题的伙伴很快找到解决办法。
这个问题是我在用 java + springboot + thymeleaf + jquery 写网站时遇到的。
先说说的要做的事:在前一个页面点击新建按钮会来到编辑页面,如果点击编辑按钮就将数据加载并进到编辑页面,所以如果是新建,那么保存的时候就发送 post 请求,反之则是 put,这部分完全仅使用 REST 风格的方式来提交数据即可,所以在这里使用了 ajax。
问题,考虑下面 ajax 代码:
$(document).ready(function() { $("#submit").on("click", function() { var url = /*[[${archive} == null ? '/api/archive' : '/api/archive/' + ${archive.id}]]*/ null; var method = /*[[${archive} == null ? 'POST' : 'PUT']]*/ null; var type = /*[[${archive} == null ? 'add' : 'update']]*/ null; var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content"); var title = $("#title").val(); var content = $("#content").val(); var postData = JSON.stringify({type: type, title: title, content: content}); $.ajax({ type: method, url: url, contentType: "application/json", beforeSend: function(xhr) { xhr.setRequestHeader(header, token); }, data: postData, dataType: 'json', success: function(data) { console.log(data); window.location.href = '/manager'; }, failure: function(errMsg) { alert(errMsg); } }); }); });
几乎没觉得有什么问题对吧。
但如上所说,它就是会报错,并且我从一开始就十分确定自己的 controller 部分绝对没问题,所以知道问题就在这段 js 中。
解决办法仅仅就是把 thymeleaf 内联的变量那几句放到 $("#submit").on(...) 的外面就可以了:
$(document).ready(function() { var url = /*[[${archive} == null ? '/api/archive' : '/api/archive/' + ${archive.id}]]*/ null; var method = /*[[${archive} == null ? 'POST' : 'PUT']]*/ null; var type = /*[[${archive} == null ? 'add' : 'update']]*/ null; $("#submit").on("click", function() { //... }); });
但就这个小问题,我吐槽一下。
做了几次实验,在ajax 前加上 console.log(url) 、不做判断,固定 url 和 methon 字符串后,都不会有任何问题。但只要写在 ("#submit").on(...) 里面,页面操作会发现 console.log(url) 没显示东西,仅换行,然后就直接 500 报错。于是,显然就明白了 thymeleaf 使用的变量在 on("click", function 这句下渲染有问题,而页面上看是完全没问题的。。。当然,我虽然对 js 完全不熟悉,但我觉得很可能是 js 是即时编译(JIT)的执行机制上的问题。因为可能这部分的运行逻辑是:thymeleaf 解析好 html, 浏览器加载 html,开始解析 html,然后加载 js,这些都过程没有问题,所以浏览器页面看到的就没什么毛病,但由于点击后还会再次执行 js,于是 $("#submit") 这段重新编译、解析,然后导致了url 为 null?(但为啥 type 和 method 不为 null ?报错的页面看 postData 的时候是正确的)。
原文地址:https://www.cnblogs.com/darkchii/p/12578989.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 疯子的算法总结(六) 简单排序总 选择排序+插入排序+比较排序+冒泡排序
- C语言基础知识总结
- CF思维联系--CodeForces - 218C E - Ice Skating (并查集)
- 数组及字符串相关知识
- C++循环结构
- C++条件分支结构
- USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers
- 数学--数论--HDU--5878 Count Two Three 2016 ACM/ICPC Asia Regional Qingdao Online 1001
- ACM-ICPC 2019 山东省省赛D Game on a Graph
- 数学--数论--HDU6919 Senior PanⅡ【2017多校第九场】
- 数学--数论--Alice and Bob (CodeForces - 346A )推导
- ACM-ICPC 2019 山东省省赛 M Sekiro
- 数学--数论--HDU2136 Largest prime factor 线性筛法变形
- ACM-ICPC 2019 山东省省赛 C Wandering Robot
- 数据库SQL语言从入门到精通--Part 2--MySQL安装