使用AJAX提交表單並且<a>標記

Question

我一直在試圖讓這個工作，但無法。 我的所有表單通常都有submit input，我像下面一樣處理AJAX提交;

<script> 
$("input#submit").click(function() { 
    $("#login-form").submit(function (e) { 
     $('#loader').show(); 
     // Client side validation 
     if ($("#email").val() == "" || $("#password").val() == "") { 
      $('#loader').hide(); 
      fieldError(); 
     } else { 
      var postData = $(this).serializeArray(); 
      var formURL = $(this).attr("action"); 
      $.ajax({ 
       url: formURL, 
       type: "POST", 
       data: postData, 
       success: function (response) { 
        switch (response) { 
        case "Valid": 
         $('#loader').hide(); 
         $('#login-form').trigger("reset"); 
         window.location.href = "index.php"; 
         break; 
        case "not eValid": 
         $('#loader').hide(); 
         emailError(); 
         break; 
        case "not Valid": 
         $('#loader').hide(); 
         credError(); 
         break; 
        } 
       } 
      }); 
     } 
     e.preventDefault(); //STOP default action 
     e.unbind(); 
    }); 
}); 
</script> 

現在我想用標籤實現同樣的事情。下面是我的代碼不起作用;

<script> 
$("a.update").click(function() { 
    $("#address-form").submit(function (e) { 
     $('#loader').show(); 
     // Client side validation 
     if ($("#addressLine1").val() == "" || $("#addressLine2").val() == "" || $("#addressLine3").val() == "") { 
      $('#loader').hide(); 
      fieldError(); 
     } else { 
      var postData = $(this).serializeArray(); 
      var formURL = $(this).attr("action"); 
      $.ajax({ 
       url: formURL, 
       type: "POST", 
       data: postData, 
       success: function (response) { 
        switch (response) { 
        case "Valid": 
         $('#loader').hide(); 
         $('#address-form').trigger("reset"); 
         //window.location.href="index.php"; 
         break; 
        case "not Valid": 
         $('#loader').hide(); 
         credError(); 
         break; 
        } 
       } 
      }); 
     } 
     e.preventDefault(); //STOP default action 
     e.unbind(); 
    }); 
}); 
</script> 

Chrome控制檯中沒有提供錯誤。 感謝您提供的任何幫助。

Answer 1

使用的文檔準備&

$("a.update").click(function (e) { 

     $('#loader').show(); 
     // Client side validation 
     if ($("#addressLine1").val() == "" || $("#addressLine2").val() == "" || $("#addressLine3").val() == "") { 
      $('#loader').hide(); 
      fieldError(); 
     } else { 

      var postData = $("#address-form").serializeArray(); 
      var formURL = $("#address-form").attr("action"); 

      $.ajax({ 
       url: formURL, 
       type: "POST", 
       data: postData, 
       success: function (response) { 
        switch (response) { 
         case "Valid": 
          $('#loader').hide(); 
          $('#address-form').trigger("reset"); 
          //window.location.href="index.php"; 
          break; 
         case "not Valid": 
          $('#loader').hide(); 
          credError(); 
          break; 
        } 
       } 


      }); 
      e.preventDefault(); //STOP default action 
      e.unbind(); 
     }); 

Answer 2

你的邏輯是錯的：

$("a.update").click(function() { 
    $("#address-form").submit(function (e) { 

     $('#loader').show(); 
     // Client side validation 
     // etc. 

當點擊該鏈接，你綁定到submit事件的一個動作表單。那不是你想要的;您可能想要在點擊鏈接時觸發提交操作代碼。

除此之外，您並未取消該鏈接的默認點擊操作，因此將被遵循。

你只需要：

$("a.update").click(function (e) { 
    e.preventDefault(); 

    $('#loader').show(); 
    // Client side validation 
    // etc. 

編輯：通過@Andreas好一點，你需要正確解決您的形式修改後的代碼：

 var postData = $("#address-form").serializeArray(); 
     var formURL = $("#address-form").attr("action");