JavaScript - thymeleaf 在 js 中渲染的一个问题

Posted 2021-03-03 darkchii

　　可能只是一个小小的问题。。。虽然解决了。但真的有点吐了。

　　嘛，可能标题取叫 「spring boot ajax 发送 post 方法报 500 状态码，put 方法报405 状态码错误」 更能让遇到相同问题的伙伴很快找到解决办法。

　　这个问题是我在用 java + springboot + security + 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);
            }
        });
    });
});

　　几乎没觉得有什么问题对吧。

　　但如上所说，spring 就是会报错，并且我从一开始就十分确定自己的 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() {
        //...
    });
});

　　但就这个小问题，我吐槽一下。

　　做了几次实验，在 ("#submit").on 里面， ajax 发送前使用固定 url 和 methon 字符串后，都不会有任何问题。但只要把 thymeleaf 语法的变量写在 ("#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 的时候是正确的）。