2015-02-09 78 views
0

我不確定爲什麼我的ajax請求的error:部分也在觸發。成功和錯誤部分實際上都是射擊。我對JS/jQuery相當陌生,但是當ajax請求成功並且出錯時觸發錯誤時,我讀取了成功。我假設成功意味着200,錯誤意味着400-500?AJAX觸發成功和錯誤

JS:

function create_post() { 
     console.log("create post is working"); 
     var firstName = document.getElementById("firstname"); 
     var lastName = document.getElementById("lastname"); 
     var email = document.getElementById("email"); 
     var phoneNumber = document.getElementById("phonenumber"); 
     var message = document.getElementById("message"); 
     var contactInfo = { 
      "first_name": firstName.value, 
      "last_name": lastName.value, 
      "email": email.value, 
      "phone_number": phoneNumber.value, 
      "message": message.value 
     }; 

     $.ajax({ 
      url: "", 
      type: "POST", 
      data: contactInfo, 
      success: ajaxSuccess(contactInfo), 
      error: console.log("ajax fail") 

     }); 
    }; 


    function ajaxSuccess(contactInfo) { 
     console.log(contactInfo); 
     // clear form data 
     document.getElementById("contact-form").reset(); 
     // display modal 
    } 


// Contact form submit 
    var contactForm = document.getElementById("contact-form"); 
    $(contactForm).on('submit', function(event) { 
     event.preventDefault(); 
     console.log("form submitted"); 
     create_post(); 
    }); 

enter image description here

回答

5

您是調用功能,通過他們返回值successerror。你需要傳遞實際的功能。

因爲在這兩種情況下,您都對函數的參數進行硬編碼,所以可以使用bind來創建新函數。

success: ajaxSuccess.bind(window, contactInfo), 
error: console.log.bind(console, "ajax fail") 
5

你的問題是,在這些線路上:

success: ajaxSuccess(contactInfo), 
error: console.log("ajax fail") 

這將有效地立即同時運行的功能,並設置這些函數的返回值的successerror性能。嘗試使用匿名回調函數。

success: function() { 
    ajaxSuccess(contactInfo); 
}, 
error: function() { 
    console.log("ajax fail"); 
} 
+0

感謝您的幫助。但是,現在我的代碼始終運行成功部分。但是,我目前沒有後端返回任何狀態代碼,因此可能是問題所在。什麼返回碼會導致錯誤部分觸發?我假設400s-500s? – Liondancer 2015-02-09 16:08:22

+0

@Liondancer'url:「」'將導致它再次請求當前頁面,這可能存在並且以成功狀態碼進行響應。 – 2015-02-09 16:10:08

+0

這是正確的答案。成功和錯誤應該是功能。錯誤回調函數返回三個參數:'jqXHR','textStatus','errorThrown',可用於將錯誤傳遞給用戶。 – Avraham 2017-05-25 23:33:10