Установка стиля на основе возврата php через ajax

Question

Мой возврат AJAX не связан с ошибками стилизации с помощью css.

Я обнаружил, что все мои возвращаемые данные из PHP отображаются с помощью функции свойства success.Все мои результаты отображаются с successCSS (Bootstrap).

Я не уверен, есть ли лучший способ получить данные из моего PHP и затем соответствующим образом оформить вывод.

<a class="btn btn-primary" onclick="validateForm()">Send</a>
<div class="alert hide" role="alert hide">
  <div class="status" id="status"></div>
</div>

function validateForm() {

  $.ajax({
      url: "register.php",
      type: "POST",
      data: $('#registration-form').serialize(),
      success: function(data, textStatus, jqXHR) {
        $('#status').text(data.message).addClass('successCSS');
        if (data.code) //If mail was sent successfully, reset the form.
          $('#registration-form').closest('form').find("input[type=text], 
            textarea ").val("
            ");
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $('#status').text(jqXHR).addClass('errorCSS');
          }
      });
  }

<?php
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];
$email = $_POST['email'];

header('Content-Type: application/json');
if ($firstname === '')
{
    print json_encode(array(
        'message' => 'firstname cannot be empty',
        'code' => 0
    ));
    exit();
}
if ($surname === '')
{
    print json_encode(array(
        'message' => 'Surname cannot be empty',
        'code' => 0
    ));
    exit();
}
if ($email === '')
{
    print json_encode(array(
        'message' => 'Email cannot be empty',
        'code' => 0
    ));
    exit();
}
else
{
    if (!filter_var($email, FILTER_VALIDATE_EMAIL))
    {
        print json_encode(array(
            'message' => 'Email format invalid.',
            'code' => 0
        ));
        exit();
    }
}
$content = "Email: $email \nMessage: $message";
$recipient = "@gmail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array(
    'message' => 'Registration successful !',
    'code' => 1
));
exit();

Answer 1

Вам необходимо проверить код === 0 и код === 1 и сбросить имена классов перед выполнением вызова ajax, чтобы не добавлять слишком много классов.Попробуйте это

function validateForm() {


$('#status').text('').removeClass('successCSS').removeClass('errorCSS');
$.ajax({
          url: "register.php",
          type: "POST",
          data: $('#registration-form').serialize(),
          success: function(data, textStatus, jqXHR) {
            if(data.code && data.code === 1) {
                $('#status').text(data.message).addClass('successCSS');
            } else {
                $('#status').text(data.message).addClass('errorCSS');
            }

            if (data.code) //If mail was sent successfully, reset the form.
              $('#registration-form').closest('form').find("input[type=text], 
                textarea ").val("
                ");
              },
              error: function(jqXHR, textStatus, errorThrown) {
                $('#status').text('error when submitting form ' + textStatus + ' : ' + errorThrown).addClass('errorCSS');
              }
          });
      }