请求 AJAX 不适用于 PHP 验证

Question

我想使用ajax以便在 PHP 验证期间fadeIn加载器并从中返回值以显示视觉效果消息，然后在加载器完成后fadeOut加载器。但是我没有设法从 PHP 验证中获得简单的回报.done function.

谁能帮我？

指数

<form action="php/valid.php" method="post" id="contact-form">
<input id="name-contact" class="uk-input uk-width-1-1 uk-margin-small" type="text" name="name" placeholder="Name"><br>
<input id="email-contact" class="uk-input uk-width-1-1 uk-margin-small" type="text" name="email" placeholder="Email"><br>
<textarea id="message-contact" class="uk-input uk-textarea uk-width-1-1 uk-margin-small" name="message" placeholder="Message" style="height:200px"></textarea>
<button id="contact-btn" class="uk-margin-small uk-button uk-button-secondary uk-width-1-1" type="submit" name="contact-form">Send</button>
</form>

.JS

$(function() {
var     data = {
name: $('#name-contact').val(),
email: $('#email-contact').val(),
message: $('#message-contact').val()
};
$('#contact-form').on('submit', function(event) {
$.ajax({
url: 'php/valid.php',
type: 'POST',
dataType: 'json',
data: data
})
.done(function(data) {
if (data.status == 'success') {
console.log('Success !');
} else if (data.status == 'error') {
console.log('Error !');
}
})
.fail(function(error) {
console.log(error);
});
});
});

PHP文件

<?
header('Content-Type: application/json');
$error = false;
$regex_name = '#^[wsp{L}-]{2,30}$#iu';
$regex_message = '#^[sS]{3,800}$#i';
if (isset($_POST['contact-form'])) {
$name = $_POST['name'];
$from = $_POST['email'];
$message = nl2br($_POST['message']);
if (!empty($name) && !empty($from) && !empty($message)) {
if (preg_match($regex_name, $name) && filter_var($from, FILTER_VALIDATE_EMAIL) && preg_match($regex_message, $message)) {
$error = array('type' => 'success');
} else {
$error = array('type' => 'error', 'value' => 'There are some errors, please check your informations.');
}
} else {
$error = array('type' => 'error', 'value' => 'Some fields are empty, please check your informations.');
}
}
if (isset($error['type']) && $error['type'] == 'success') {
$return_status['status'] = 'success';
echo json_encode($return_status);
}
else {
if (isset($error['type']) && $error['type'] == 'error') {
$return_status['status'] = 'error';
echo json_encode($return_status);
}
}
?>

谢谢。

Answer 1

首先，您需要调用event.preventDefault()以防止表单正常提交。

其次，您需要在事件处理程序中获取输入的值。您的代码在用户填写表单之前设置data加载页面的时间。

第三，你的 PHP 脚本检查contact-form参数。这是在您正常提交表单时发送的，但您的 AJAX 请求未设置它。您需要将其添加到data中，或者从 PHP 中删除if (isset($_POST['contact-form']))(如果valid.php从未用于其他任何用途，则可能不需要此检查(。

$(function() {
$('#contact-form').on('submit', function(event) {
event.preventDefault();
var data = {
name: $('#name-contact').val(),
email: $('#email-contact').val(),
message: $('#message-contact').val(),
"contact-form": true
};
$.ajax({
url: 'php/valid.php',
type: 'POST',
dataType: 'json',
data: data
})
.done(function(data) {
if (data.status == 'success') {
console.log('Success !');
} else if (data.status == 'error') {
console.log('Error !');
}
})
.fail(function(error) {
console.log(error);
});
});
});

Answer 2

将按钮类型更改为按钮：

<button id="contact-btn" class="" type="button" name="contact-form">Send</button>

像下面这样更改您的 js 代码：

$(document).ready(function () {
$('#contact-btn').click(function(event) {
var data = {
name: $('#name-contact').val(),
email: $('#email-contact').val(),
message: $('#message-contact').val()
};
$.ajax({
url: 'php/valid.php',
type: 'POST',
dataType: 'json',
data: data,
success: function(response) {
if (response.status == 'success') {
console.log('Success !');
} else if (response.status == 'error') {
console.log('Error !');
} else
console.log("Somthing went wrong....")
},
error:function(){
console.log("error");
}
});
});
});