Jquery Ajax 表单未提交且 url 显示 csrf 令牌

Jquery Ajax form not submitting and url is showing csrf token

我是 Ajax 的新手,我正在尝试使用 jquery、ajax 和 thymeleaf 提交表单以供查看。我知道 post url 有效,因为如果我只是告诉 ajax 在页面加载后立即提交,表单中的任何内容都会毫无问题地提交给数据库,但是如果我尝试使用提交按钮执行此操作,然后表单变为空白,并且 url 更改为类似 http://localhost:8080/viewCourse/post/1?_csrf=d512fb5c-08e5-4373-895e-1297b0c35a4b 的内容,并且没有任何内容进入数据库,但控制台中也没有错误,所以我不确定发生了什么。

这是我的 jquery 和 ajax

var postId = /*[[${post.id}]]*/'1';

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

$(document).ajaxSend(function(e, xhr, options) {
    xhr.setRequestHeader(header, token);
});

$("#submit").click(function() {
    $.ajax({
        url : "newComment",
        type : "post",
        data : {
            "postId" : postId,
            "newComment" : $("#newComment").val()
        },
        success : function(data) {
            console.log(data);
            location.reload();
        },
        error : function() {
            console.log("There was an error");
        }
    });
});

这是我的 html 使用 thymeleaf

<div id="newCommentForm">
    <form>
        <div class="form-group">
            <textarea rows="2" id="newComment" placeholder="comment"
                      class="form-control" style="width: 520px;">
            </textarea>
        </div>
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
        <input type="submit" value="Comment" id="submit" class="btn btn-info"/>
    </form>
</div>

如果有人能看到我做错了什么并让我知道那就太好了,在此先感谢。

表格变空白还是页面变空白?

您没有阻止 HTML 表单提交,因此正在提交表单,这就是值在 URL 中的原因。

尝试:

$("#submit").click(function(e) {

    e.preventDefault()

    // ajax code here

});

首先,您必须在 $(document).ready(function(){}); 中声明您的点击侦听器,否则这部分代码是 运行 在您的 DOM 元素存在之前,因此它们不会调用您的点击功能。

修复此问题后,您会看到您的表单将执行其默认操作(与您现在所经历的一样)。为此,您必须阻止提交按钮的默认操作:

$(document).ready(function(){
    $("#submit").on("click", function(ev) {
        ev.preventDefault();

        ...

    });
});

就我个人而言,我更喜欢 on("click", ...),但您的方法也行得通。 希望对你有帮助。