SweetAlert與Java Servlet

Question

我想暫停表單的提交，所以我可以讓用戶在繼續之前確認操作。 因此，這裏是我的形式：

  <form action="<%= request.getContextPath()%>/Controller" 
        method="POST" id="remove_book" 
        onsubmit="alertBookInfo('return_book')"> 
      </form> 

然後，我創建JavaScript函數，使用SweetAlert：

function alertInfo(action) { 
document.querySelector(action).addEventListener('submit', function (e) { 
    var form = this; 
    e.preventDefault(); 
    if (action === "remove_book") { 
     swal({ 
      title: "Remove book?", 
      text: "Watch out", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes.", 
      cancelButtonText: "No.", 
      closeOnConfirm: false, 
      closeOnCancel: false 
     }, 
     function (isConfirm) { 
      if (isConfirm) { 
       swal({ 
        title: "Deleted.", 
        text: "Done.", 
        type: "success" 
       }, function() { 
          form.submit(); 
       }); 
      } else { 
       swal("Cancelled", "Not done.", "error"); 
      } 
     }); 
    } 
}); 
} 

但由於某些原因，我無法阻止對錶單頁面重載提交。我在做錯什麼？ PS：我已經嘗試在窗體中返回alertInfo（），並從JS函數返回布爾值，但沒有成功。

Answer 1

爲什麼不從這樣的形式調用函數時，警報將提交表單之前是提示：

HTML

<form action="<%= request.getContextPath()%>/Controller" method="GET" id="remove_book" onclick="myAlertFunction(event)"> 
    <input type="submit"> 
</form> 

的JavaScript

function myAlertFunction(event) { 
    event.preventDefault() 
    swal({ 
     title: "Remove book?", 
     text: "Watch out", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes.", 
     cancelButtonText: "No.", 
     closeOnConfirm: false, 
     closeOnCancel: false 
    }, 
    function(isConfirm) { 
     if (isConfirm) { 
     swal({ 
      title: "Deleted.", 
      text: "Done.", 
      type: "success" 
     }, function() { 
      $("#remove_book").submit(); 
     }); 
     } else { 
     swal("Cancelled", "Not done.", "error"); 
     } 
    }); 
} 

如果你想防止重載，你可以隨時使用event.preventDefault()

下面是一個例子：JSFiddel

Answer 2

如果你不想重新加載頁面，你可以使用AJAX調用。當你使用submit（）時，你總是會重新加載頁面，因爲提交是如何工作的。

$.ajax({ 
     method: "POST", 
     url: YOUR_ACTION_URL, 
     data: $('form').serialize(), 
     success: function(data){ 
      //here you could add swal to give feedback to the user 
     } 
    }); 

在你的控制器，你必須定義的方法產生JSON，如果你使用Spring，註釋是

@ResponseBody