码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2020-03-27 20:03:34      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:log   语法   ESS   解决办法   ajax   doc   eth   BMI   for   

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

  嘛,可能标题取叫 「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 的时候是正确的)。

  

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

标签:log   语法   ESS   解决办法   ajax   doc   eth   BMI   for   

原文地址:https://www.cnblogs.com/darkchii/p/12578989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!