2017-02-22 99 views
-1

我有聯繫表單,我想爲這個表單使用ajax。jQuery ajax表格

文件結構:

-contact.html

-email.php

jQuery的版本 - 1.12.4

所以我添加腳本我的形式(#send_message)

var send_message = $('#send_message'); 
send_message.on('click', function(e){ 
    e.preventDefault(); 
    var error = false; 
    var name = $('#name').val(); 
    var email = $('#email').val(); 
    var message = $('#message').val(); 

    if(name.length === 0){ 
     var error = true; 
    } 
    if(email.length === 0 || email.indexOf('@') === -1){ 
     var error = true; 

    } 
    if(message.length === 0){ 
     var error = true; 
    } 

    if(error == false){ 

     var formData = { 
      'name'    : name, 
      'email'    : email, 
      'message'   : message 
     }; 

     $.ajax({ 
      type  : 'POST', 
      url   : 'email.php', 
      data  : formData, 
      success: function(){ 
       $('#send_message').remove(); 
       $('#mail_success').fadeIn(500);    } 
     }) 

    } 
}); 

我得到用戶名,電子郵件和消息。但似乎Ajax不能發送數據到我的email.php。我在控制檯日誌中看不到ajax消息

+0

檢查您的控制檯,你得到任何錯誤 –

+0

嘗試添加AJAX參數數據類型:「JSON」,並使用JSON.stringify將數據作爲json傳遞。 –

+0

添加錯誤:函數(jqXHR,textStatus,errorThrown){console.log(errorThrown);} –

回答

1

數據可能已損壞。 Serialze FORMDATA以JSON -

data: { 
 
    data: JSON.stringify(formData) 
 
}

在服務器端反序列化 - 從PHP

$dataJson=json_decode($_POST["data"]); 
 
$name= $dataJson->{'name'}; 
 
$email= $dataJson->{'email'}; 
 
$message= $dataJson->{'message'};

返回結果 - 回聲結果

要查看已被服務器返回,更換圓滿成功 -

complete: function(data) { 
 
// keep break point in body and inspect data.ResponseText 
 
//check http request status 
 
}