$（“＃”）。submit與Ajax刷新頁面一起提交

Question

由於此代碼之前工作得很好，所以不確定是什么問題，我正在嘗試使用Ajax提交表單，這是我的代碼

Ajax代碼

 $(function() {
 $("#login").submit(function() {
   $('#signinPane').showLoading();
 $("#loginError").hide();
 var data = $(this).serializeObject();
    $.ajax({
        'type': "POST",
         'url': "<c:url value="/shop/customer/j_spring_security_check"/>",
         'data':data,
         'success': function(result) {

         }
       });

     return false;
   });
});

HTML代碼

<form id="login" method="post" accept-charset="UTF-8">
<input id="userName" style="margin-bottom: 15px;" type="text" name="j_username" size="30" />
<input id="password" style="margin-bottom: 15px;" type="password" name="j_password" size="30" />
<button type="submit" id="login-button"></button>
</form>

我的問題是，當我單擊“提交”按鈕時，頁面正在刷新，並且根本沒有提交任何Ajax調用。 不知道發生了什么。

Answer 1

我認為您需要在事件對象上調用preventDefault 。

當您處於普通JS處理程序中時，返回false是可以的，而實際上並非如此。

Answer 2

嘗試將事件作為參數傳遞，然后調用e.preventDefault()

jsfiddle 文檔

$(function() {
    $("#login").submit(function(e) {
        e.preventDefault();
        $('#signinPane').showLoading();
        $("#loginError").hide();
        var data = $(this).serializeObject();
        $.ajax({
            'type': "POST",
            'url': "<c:url value="/shop/customer/j_spring_security_check"/>",
            'data':data,
            'success': function(result) {

            }
        });
    });
});

Answer 3

采用

event.preventDefault();


$("#login").submit(function(event) {
    event.preventDefault();
    $('#signinPane').showLoading();

這將防止默認表單提交特征。

Answer 4

嘗試：

$("#login").submit(function(e) {
 e.preventDefault();
 e.stopPropagation();

http://api.jquery.com/event.preventDefault/

http://api.jquery.com/event.stopPropagation/