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