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令牌，并且没有数据提交到数据库中。这就是我提交http://localhost:8080/viewCourse/post/1?_csrf=abefbd5b-392e-4c41-9d66-d66616fc4cc7时我的网址的样子，如果我取消了我所做的更改并将其放回刷新循环中，如果我可以在页面刷新之前获取表单中的任何文本确实提交到数据库，所以我认为这意味着我有一个有效的网址，因为它有点工作。我真的不知道是什么导致这个，但表单似乎没有提交正确的信息，只有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

您正在构建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之类的内容并确保在发送之前验证您的数据等。这只是提供默认情况下不会触发的答案

Answer 2

<强>更新

终于到了我的电脑：）

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

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

我不确定您的HTML，但如果submit按钮位于<form>内，则您可以使用$(SELECTOR).submit()。但我的下面示例将基于您的HTML。

首先，你需要在提交按钮中添加一个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>

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

// 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回调中的success）。

要使用提交按钮进行表单提交，您需要绑定到其单击事件。

我现在正在打电话，稍后会更新示例。

Ajax自动提交和刷新页面

2 个答案: