AJAX的錯誤發送形式沒有Ajax

Question

我有以下代碼：

$("#contactform").validate({ 
    rules: { 
     // ... 
    }, 
    submitHandler: function(form) { 
     var postData = $(form).serializeArray(); 
     var formURL = $(form).attr("action"); 
     $.ajax({ 
        url : formURL+'validate', 
        type: "POST", 
        data : postData, 
        success: function(data, textStatus, jqXHR) 
        { 

          $.ajax({ 
           url : formURL, 
           type: "POST", 
           data : postData, 
           beforeSend: function(){ 
            // ... 
           }, 

           success:function(data, textStatus, jqXHR) 
           { 
            // ... 
           }, 
           error: function(jqXHR, exception) 
           { 
            $(form).submit(); 
           }, 
           complete: function(){ 
            // ... 
           } 
          }); 
        }, 
        error: function(jqXHR, exception) 
        { 
         $(form).submit(); 
        } 

       }); 
    } 
}); 

在2個地方我有$(form).submit(); - 我想在這個地方提交應更改爲後發送的形式不使用AJAX（URL一個在行爲屬性中的形式）。

在好像數據正在使用AJAX發送的時刻 - 當我添加警報發送$(form).submit();警報正在顯示一個又一個（我準備PHP腳本返回不正確的數據）

*編輯*

變更後我的代碼是：

我開始形式

<form method="post" action="{{ current_url }}" id="contactform" onsubmit="return formAjaxSubmit(this);"> 

我的完整AJAX代碼：

$("#contactform").validate({ 
     rules: { 
      content_{{ hash_tag }}: { 
       required: true, 
       minlength: 20 
      }, 
      name_{{ hash_tag }}: { 
       required: true, 
       minlength: 2 
      }, 
      subject_{{ hash_tag }}: { 
       required: true, 
       minlength: 10 
      }, 
      email_{{ hash_tag }}: { 
       required: true, 
       email: true 
      } 
     }, 
     submitHandler: function(form) { 

     } 
    }); 


    function formAjaxSubmit(form) { 

      var postData = $(form).serializeArray(); 
      var formURL = $(form).attr("action"); 
      $.ajax({ 

         url : formURL+'validate', 
         type: "POST", 
         data : postData, 
         success: function(data, textStatus, jqXHR) 
         { 
           $.ajax({ 
            url : formURL, 
            type: "POST", 
            data : postData, 
            beforeSend: function(){ 
             if(data.valid == 1) { 
              $(form).hide(); 
              $("#formsending").show(); 
             } 
            }, 

            success:function(data, textStatus, jqXHR) 
            { 
             $('#articlecontent').html(data.content); 
             $("html, body").animate({ scrollTop: 0 }); 
             return false; 
            }, 
            error: function(jqXHR, exception) 
            { 
             return true; 
            }, 
            complete: function(){ 
             if(data.valid == 1) { 
              $("#formsending").hide(); 
              $(form).show(); 
             } 
            } 
           }); 
         }, 
         error: function(jqXHR, exception) 
         { 
          return true; 
         } 

        }); 

    } 

</script> 

但是現在我遇到了使用jQuery驗證字段的問題。當我點擊提交，即使表單沒有完成時，表單也會通過AJAX發送，即使jQuery驗證完成，也只是在顯示PHP驗證結果之後。如果我從形式和submitHandler刪除onsubmit我：

formAjaxSubmit(form); 

一切似乎很好地工作。

Answer 1

我提出的解決方案是

<form action="nonAjaxSubmitHandler.php" onsubmit="return tryAjaxSubmit();"> 
... 
</form> 


function tryAjaxSubmit() { 
    // Ajax code - on success 
    return false; // stops form submitting via http post 

    // On error 
    return true; // form will submit via http post 
} 

正如評論（感謝ElmoVanKielmo）指出的那樣，你可能需要設置async: false選項，在您的jQuery的崗位（成功後：和失敗：選項）。

onSubmit強制表單運行tryAjaxSubmit（），根據此方法的結果，表單將通過HTTP POST（或GET）提交或不提交。

所以在tryAjaxSubmit，我們嘗試我們的Ajax代碼：

• 如果是全成，我們返回假（這樣的形式都不是人工提交 和網頁不刷新）
• 如果有一個錯誤，我們返回真和形式手動提交

---

試試這個：

<form method="post" action="{{ current_url }}" id="contactform" onsubmit="return formAjaxSubmit(this);"> 

<script> 
function formAjaxSubmit(form) { 
    // Do validation 
    $("#contactform").validate({ 
    rules: { 
     //.... 
    }, 
    submitHandler: function(form) { 
     // When form is validated, submit via ajax 
     var postData = $(form).serializeArray(); 
     var formURL = $(form).attr("action"); 
     $.ajax({ 
     url : formURL+'validate', 
     type: "POST", 
     data : postData, 
     success: function(data, textStatus, jqXHR){ 
      ... 
      return false 
     }, 
     error: function(jqXHR, exception) 
     { 
      return true; 
     } 
     }); 
    }); 
} 
</script> 

Answer 2

我的假設是，由於提交處理程序已經連接，所以當你正在做另一個提交時，它再次調用提交處理程序。

不要嘗試提交相同的表單，並嘗試使用動作url和從當前表單到另一個表單的序列化數據生成另一個表單。

請在下面找到提交數據的解決方案
1.刪除提交處理程序，然後調用submit（）。頁面將刷新並提交處理程序將重新附加。
2.使用一個變量來存儲錯誤標誌（我不會推薦，但仍然是一種方法）。在發送AJAX請求之前在提交處理程序中使用此標誌。