Ajax自动提交和刷新页面

Question

所以，我是ajax新手，我正在尝试使用ajax和jquery提交表单，我想我已经弄清楚了服务器端的逻辑，因为当我加载页面时，它会自动提交，页面会很快刷新。空白表单将进入数据库，尽管其中有很多表单，因为页面会不断提交每次刷新。所以我认为我的服务器端正在工作，但我不知道该怎么做，不仅要阻止它刷新，还要使用html表单中的提交按钮进行提交。我在html页面中使用了thymeleaf。

这是我的html表单，使用thymeleaf

<div id="newCommentForm">

        <fieldset>
            <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" class="btn btn-info" />
        </fieldset>

    </div>

这是我的jquery和ajax

<script th:inline="javascript">
/*<![CDATA[*/

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);
});

$(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");
        }
    });
});
/*]]>*/

提前谢谢。

更新

所以现在当我提交表单时，页面会刷新，url会做一些奇怪的事情，并显示csrf标记，并且没有数据提交到数据库中。这就是我提交时url的样子http://localhost:8080/viewCourse/post/1?_csrf=abefbd5b-392e-4c41-9d66-d66616fc4cc7，如果我去掉所做的更改并将其放回刷新循环中，如果我可以在表单中获取任何文本，则在页面刷新之前，它实际上会提交到数据库，因此我认为这意味着我有一个有效的url，因为它可以正常工作。我真的不知道是什么导致了这种情况，但表单似乎没有提交正确的信息，只有csrf令牌。这是我更新的jquery、ajax和html

jQuery//

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

        <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>

Answer 1

使现代化

终于到了我的电脑：）

好吧，让我们检查原始代码的问题

/* $(function() {...}); is equivalent to $(document).ready();
 * The code wrapped inside will be executed once the page is
 * ready (loaded properly).
 */
$(function() {
  // $.ajax() fires as soon as page is ready, causing it to be
  // called "automatically"
  $.ajax({
    url : "newComment",
    type : "post",
    data : {
      "postId" : postId,
      "newComment" : $("#newComment").val()
    },
    success : function(data) {
      // This is called as soon as the AJAX is completed...
      console.log(data);
      location.reload(); // ... and this refreshes the page, causing loop
    },
    error : function() {
      console.log("There was an error");
    }
  });
});

我不确定你的超文本标记语言，但是如果提交按钮在中

首先，您需要向submit按钮添加一个id（任何好的选择器都可以）。

<div id="newCommentForm">
  <fieldset>
    <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}" />
    <!-- ADD AN ID TO THIS BUTTON -->
    <input type="submit" value="Comment" id="mySubmitButton" class="btn btn-info" />
  </fieldset>
</div>

然后您需要更新代码以绑定到按钮的单击事件。

// 1. First is this $(document).ready() shorthand
$(function() {
  // 2. Add a click handler to the button, it will be called when clicked
  $('#mySubmitButton').on('click', function(e) {
    // 3. Prevent default behavior of submit button
    e.preventDefault();

    // Prepare your variables
    var postId = 0; // Post id?

    // 4. Fire the ajax call
    $.ajax({
      url : "/MAKE/SURE/THIS/IS/A/VALID/URL",
      type : "post",
      data : {
        "postId" : postId,
        "newComment" : $("#newComment").val()
      },
      success : function(data) {
        console.log(data);
        //location.reload(); // Comment this out first to see if it works
      },
      error : function() {
        console.log("There was an error");
      }
    });
  });
});

我正在为Plunker找到模拟服务器响应的方法，稍后将再次更新。

原始的

您的代码将在ajax调用就绪后立即启动它。当页面准备就绪时，将执行包装在$（function（）{}）中的代码，这就是自动触发ajax调用的原因。

此外，页面将在ajax调用完成时刷新（$location.reload中的成功回调）。

要使用submit按钮提交表单，需要绑定到其click事件。

我现在正在打电话，稍后将用示例进行更新。

Answer 2

您正在构建jquery，使其在加载时运行。尝试将HTML更改为：

<div id="newCommentForm">

        <fieldset>
            <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" id="submit" value="Comment" class="btn btn-info" />
        </fieldset>

    </div>

和JQuery到这个：

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", //assuming this is corrected to url
        type : "post",
        data : {
            "postId" : postId,
            "newComment" : $("#newComment").val()
        },
        success : function(data) {
            console.log(data);
            location.reload();
        },
        error : function() {
            console.log("There was an error");
        }
    });
        });

这将防止自动触发ajax，并使用按钮的id将其连接到提交按钮。

只需确保更正URL等内容，并确保在发送之前验证数据。这只是提供了默认情况下不触发的答案