使用jquery ajax将数据传递给php的问题
问题描述:
我有一个html表单,应该通过jquery ajax将数据提交给php文件。代码可以在下面看到。我遇到的问题是,单击提交时,ajax似乎没有将数据传递给php,因为done()函数下的console.log返回$ data对象,显示所有字段都为空(即当字段为空时返回错误消息)。我根本得不到问题所在。当我提交表单而不使用ajax,即禁用整个$('form')。submit(...)块时,成功消息返回true。阿贾克斯块始终返回false使用jquery ajax将数据传递给php的问题
<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 [email protected]" 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);
?>
答
您的问题是有关参数的名称在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 ***/
答
$("#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);
+0
谢谢。你的回答补充了@Gabriel Heming的回答,并帮助我了解如何处理javascript和on关闭的情况 – nelson
中完成的部分,你应该使用JSON.parse(数据);因为你是从php – Jigar7521
@ Jigar7521传递json解码不,他不应该这样做。如果AJAX的dataType定义为JSON,则不需要JSON.parse。 –