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回調）。

要使用提交按鈕進行表單提交，您需要綁定到其單擊事件。

我現在打電話，稍後會更新示例。