使用 jquery ajax 将数据传递给 php 的问题
Posted
技术标签:
【中文标题】使用 jquery ajax 将数据传递给 php 的问题【英文标题】:Problems with passing data to php using jquery ajax 【发布时间】:2017-03-23 02:43:00 【问题描述】:我有一个 html 表单,它应该通过 jquery ajax 将数据提交到 php 文件。代码如下所示。我遇到的问题是,在单击提交时,ajax 似乎没有将数据传递给 php,因为 done() 函数下的 console.log 返回一个 $data 对象,显示所有字段都是空的(即当字段为空时返回错误消息)。我根本不知道问题出在哪里。当我在不使用 ajax 的情况下提交表单时,即禁用整个 $('form').submit (...) 块,成功消息返回 true。 ajax 块总是返回 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();
);
这是 form_submit.php 中的 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);
?>
【问题讨论】:
在完成部分你应该使用 JSON.parse(data);当您从 php 传递 json 解码时 @Jigar7521 不,他不应该。如果 AJAX 的 dataType 定义为 JSON,则不需要 JSON.parse。 【参考方案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 ***/
【讨论】:
Yeeeeessssss!切换代码并立即工作!我唯一担心的是当有人关闭 javascript 时,它不会工作。如何编码以适应 php 文件中的这两种情况? 回答我自己,第二种解决方案(序列化表单)同时满足这两种情况,即我没有使参数与 AJAX 匹配。 如果您对表单进行序列化,它将与您的 HTML 表单中的参数名称一起提供。因此,您的 PHP 应该与表单名称匹配(就像您之前所做的那样)【参考方案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);
【讨论】:
谢谢。您的回答补充了@Gabriel Heming 的回答,并帮助我了解了如何应对 JavaScript 开启和关闭的情况以上是关于使用 jquery ajax 将数据传递给 php 的问题的主要内容,如果未能解决你的问题,请参考以下文章