使用Ajax提交表单Jquery

Question

我正在尝试创建一个使用AJax提交表单的表单，而不是重新加载页面，但我尝试的每一个代码都不会向我指定的电子邮件发送任何内容。

这是我的代码：

compform.php

<?php 
if(isset($_POST['submit'])){
$to = "[e-mail]";// this is your Email address
$from = $_POST['mail']; // this is the sender's Email address
$name = $_POST['name'];
$mail = $_POST['mail'];
$subject = "Quadflow Content Writing Service Request";
$message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
$message .= $name;
$headers = "From:" . $from;
mail($to,$subject, $message,$headers);
header("Location: " . $_SERVER['REQUEST_URI'] . "?mail=sent");
exit();
}
?>

Jquery(Ajax(:

$('.compform').submit(function(event) {
var formData = {
'name'              : $('input[name=name]').val(),
'mail'             : $('input[name=mail]').val()
};
$.ajax({
type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url         : 'compform.php', // the url where we want to POST
data        : formData, // our data object
dataType    : 'json', // what type of data do we expect back from the server
encode          : true
})
.done(function(data) {
console.log(data); 
});
event.preventDefault();
$('.compform button').html('Success!');
});

Html

<form class="compform" action="compform.php" method="post">  
<input placeholder="Name" name="name"> 
<input placeholder="Email" name="mail">
<input placeholder="Type of Website" name="type"> 
<select name="selectoptions">
<option value="choose" disabled selected>Choose a Style</option> 
<option value="modern">Modern</option>
<option value="serious">Serious</option>
<option value="light">Light Tone</option> 
<option value="creative">Creative</option>
</select>
<textarea placeholder="Additional Information" name="info"></textarea>
<button type="submit" name="submit">Submit</button>
</form> 

Answer 1

首先，检查PHP脚本中是否设置了字段"submit"，但不要在ajax调用中传递它。接下来，您不会给出json响应作为答案，因为您进行了转发。

此外，您还在ajax调用中使用encode属性，但该属性似乎并不存在。此外，您还可以使用complete方法来获取ajax调用的状态消息。

你可以综合使用这些代码(如果你的mail功能正常工作(

PHP

if(isset($_POST['submit'])){
$to = "[e-mail]"; // this is your Email address
$from = $_POST['mail']; // this is the sender's Email address
$name = $_POST['name'];
$mail = $_POST['mail'];
$subject = "Quadflow Content Writing Service Request";
$message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
$message .= $name;
$headers = "From:" . $from;
mail($to,$subject, $message,$headers);
header('Content-Type: application/json');
echo json_encode(['status' => 'success', 'message' => 'The mail sends successfully']);
exit();
}

jQuery

$(document).ready(function() {
$('.compform').on('submit', compformSubmit);
function compformSubmit(event) {
event.preventDefault();
var target = $(event.target);
var formData = {
'name': target.find('input[name="name"]').val(),
'mail': target.find('input[name="mail"]').val(),
'submit': true
};
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: 'compform.php', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
// encode: true // this setting does not seem to exist
})
.done(function(data) {
console.log(data);
target.find('button').text('Success!');
})
.always(function(jqXHR, textStatus) {
console.log(jqXHR);
console.log(textStatus);
target.find('button').text('Always!');
});
}
});

HTML

<form class="compform" action="compform.php" method="post">
<input placeholder="Name" name="name">
<input placeholder="Email" name="mail">
<input placeholder="Type of Website" name="type">
<select name="selectoptions">
<option value="choose" disabled selected>Choose a Style</option>
<option value="modern">Modern</option>
<option value="serious">Serious</option>
<option value="light">Light Tone</option>
<option value="creative">Creative</option>
</select>
<textarea placeholder="Additional Information" name="info"></textarea>
<button type="submit" name="submit">Submit</button>
</form>