请求 ajax 不适用于 php 验证

Question

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

谁能帮帮我？

索引

<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 = '#^[\w\s\p{L}-]{2,30}$#iu';
    $regex_message = '#^[\s\S]{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");
              }
        });
    });
});