使用jquery ajax将数据传递给php的问题

Question

我有一个html表单，应该通过jquery ajax将数据提交给php文件。代码可以在下面看到。我遇到的问题是，单击提交时，ajax似乎没有将数据传递给php，因为done（）函数下的console.log返回$ data对象，显示所有字段都为空（即当字段为空时返回错误消息）。我根本得不到问题所在。当我提交表单而不使用ajax，即禁用整个$（'form'）。submit（...）块时，成功消息返回true。阿贾克斯块始终返回false

<form id="sds_contact_form" class="sds_form" action="form_submit.php" method="post"> 
        <!-- name --> 
        <div class="sds_input_group sds_half_field"> 
         <label for="sds_sender_name">full name*</label> 
         <input id="sds_sender_name" name="sds_customer" type="text" placeholder="eg John smith" required /> 
         <span id="sds_customername_error" class="sds_error_span"></span> 
        </div> 
        <!-- email address --> 
        <div class="sds_input_group sds_half_field"> 
         <label for="sds_sender_email">email*</label> 
         <input id="sds_sender_email" name="sds_form_email" type="email" placeholder="eg j.smith@example.com" required /> 
         <span id="sds_email_error" class="sds_error_span"></span> 
        </div> 
        <!-- subject --> 
        <div class="sds_input_group"> 
         <label for="sds_email_subject">subject*</label> 
         <input id="sds_email_subject" name="sds_form_subject" type="text" placeholder="e.g need an app designed" required /> 
         <span id="sds_subject_error" class="sds_error_span"></span> 
        </div> 
        <!--enquiry --> 
        <div class="sds_input_group"> 
         <label for="sds_sender_enquiry">enquiry*</label> 
         <span id="sds_enquiry_error" class="sds_error_span"></span> 
         <textarea id="sds_sender_enquiry" name="sds_form_enquiry" placeholder="enter details here" rows="15" required></textarea> 
        </div> 
        <!-- submit button --> 
        <button name="sds_submit_enquiry" type="submit" class="sds_form_button sds_button">send</button> 
       </form> 

这是jQuery代码

//form data submission 
$('form').submit(function(event){ 
    var form_data = { 
     'customer_name' : $('#sds_sender_name').val(), 
     'customer_email' : $('#sds_sender_email').val(), 
     'email_subject': $('#sds_email_subject').val(), 
     'enquiry': $('#sds_sender_enquiry').val() 
    }; 
    console.log(form_data); 

    $.ajax({ 
     url :'form_submit.php', 
     type:'POST', 
     data:form_data, 
     dataType:'json', 

    }).done(function(data){ 
     console.log(data); 

    }).fail(function(xhr, ajaxOptions, thrownError){ 
     console.log("ERROR:" + xhr.responseText+" - "+thrownError); 
    }); 
    event.preventDefault(); 


}); 

这是PHP代码中form_submit.php

<?php 

$data = array(); 
$errors = array(); 

//get form data 
$customer_name = $_POST['sds_customer']; 
$customer_email = $_POST['sds_form_email']; 
$email_subject = $_POST['sds_form_subject']; 
$enquiry = $_POST['sds_form_enquiry']; 

//validate name 
if(empty($customer_name)){ 
    $errors['customer_name'] = 'name is required'; 
} 

//validate email 
if(empty($customer_email)){ 
    $errors['customer_email'] = 'email is required'; 
}else{ 
    if(!filter_var($customer_email,FILTER_VALIDATE_EMAIL)){ 
     $errors['customer_email'] = 'email provided is invalid'; 
    } 
    $customer_email = filter_var($customer_email,FILTER_SANITIZE_EMAIL); 
} 

//validate form subject 
if(empty($email_subject)){ 
    $errors['email_subject'] = 'subject is required'; 
}else{ 
    $email_subject = filter_var($email_subject,FILTER_SANITIZE_STRING); 
} 

//validate form comments 
if(empty($enquiry)){ 
    $errors['enquiry'] = 'please enter your enquiry'; 
}else{ 
    $enquiry = filter_var($enquiry,FILTER_SANITIZE_STRING); 
} 



if(!empty($errors)){ 
    $data['success'] = false; 
    $data['errors'] = $errors; 
}else{ 
    $data['success'] = true; 
    $data['message'] = "Your email has been sucessfully sent. Thank you for your enquiry. Exepect a response soon!"; 

    //further data processing here.... 


} 
echo json_encode($data); 

？>

Answer 1

您的问题是有关参数的名称在jQuery的作为参数的定义：

var form_data = { 
    'customer_name' : $('#sds_sender_name').val(), 
    'customer_email' : $('#sds_sender_email').val(), 
    'email_subject': $('#sds_email_subject').val(), 
    'enquiry': $('#sds_sender_enquiry').val() 
}; 

在PHP，您使用的是SDS前缀（形式为写）：

//get form data 
$customer_name = $_POST['sds_customer']; 
$customer_email = $_POST['sds_form_email']; 
$email_subject = $_POST['sds_form_subject']; 
$enquiry = $_POST['sds_form_enquiry']; 

您的参数应该与AJAX匹配，而不是与表格匹配（如下所示）。

$customer_name = $_POST['customer_name']; 
$customer_email = $_POST['customer_email']; 
$email_subject = $_POST['email_subject']; 
$enquiry = $_POST['enquiry']; 

或者只是使用序列化的形式：

$.ajax(
    data: $("#sds_contact_form").serialize(), 
    /*** others parameters ***/ 

Answer 2

$("#sds_contact_form").serialize() // returns all the data in your form 

$.ajax({ 
    type: "POST", 
    url: 'form_submit.php', 
    data: $("#sds_contact_form").serialize(), 
    dataType:'json', 
    success: function(data) { 
      console.log(data); 
    } 
}); 

在你的php文件反序列化你的数据

unserialize($data);