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

在此先感谢。

UPDATE

所以现在当我提交表单的页面刷新和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回调）。

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

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