Как отобразить ошибку консоли как ошибку проверки?

Question

У меня есть форма, которая при отправке выполняет некоторые проверки правильности, а затем запускает функцию для запроса токена. Если отправка не удалась, появляется сообщение об ошибке POST 403 (запрещено). Я хотел бы использовать это сообщение об ошибке (или любой другой рекомендуемый способ) для отображения сообщения об ошибке на веб-странице php. Как я могу это сделать?

Получить токен, используя имя пользователя и пароль, и сохранить в сеансе

    function getToken(username, password) {


        $.ajax({
            url: RESTROOT + '/jwt-auth/v1/token',
    method: 'POST',
    data: {
        'username': username,
        'password': password

    }
        })

        .done(function(response){
            sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
                    $LOGIN.fadeToggle();
            $LOGOUT.toggle();
             $POST.fadeToggle();

        })
    }

Проверить ввод формы входа

    <?php $usernameErr = $passwordErr = "";
    $error = false;

    if (empty($_POST["firstname"])) {
        $usernameErr = "Name is required";
        $error = true;
      } else {
        $username = test_input($_POST["username"]);
        // check if field contains only letters and spaces
        if (!preg_match("/^[a-zA-Z ]*$/",$firstname)) {
      $usernameErr = "Only letters and white space allowed";
    }
      }

    if (empty($_POST["password"])) {
        $passwordErr = "Password is required";
        $error = true;
      } else {
        $password = test_input($_POST["password"]);
        // check if field contains only letters and spaces
        if (!preg_match("/^[a-zA-Z ]*$/",$firstname)) {
      $passwordErr = "Only letters and white space allowed";
    }
      }

    if($error == false){
      $_SESSION['username'] = $username;
    }

    function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }

    ?>

ФОРМА ЛОГИНА

    <form name="loginform" id="loginform" style="display: none" >
    <h2>Login form</h2>
    <p><strong>You must log in with valid credentials before you are able to submit a post.</p></strong>

    <label for"uer_login">Username:<span class="error">* <?php echo $usernameErr;?></span> <!-- shows errors on the page -->
    <input type="text" id="user_login" name="username" class="input" value="<?php echo $username;?>" placeholder="username"></label>

    <label for"user_pass">Password:<span class="error">* <?php echo $passwordErr;?></span> <!-- shows errors on the page -->
      <input type="password" id="user_pass" name="pass" class="input" value="" placeholder="Title"></label>

      <button id="login_button" type="submit" class="success button"> Login</button>
      </form>

Answer 1

вам нужно отловить ошибку из запроса, добавив:

.catch((error)=>{
    console.log({error});
})

к обещанию после .done(...)

, следовательно, getToken тело функции будет:

$.ajax({
    url: RESTROOT + '/jwt-auth/v1/token',
    method: 'POST',
    data: {
        'username': username,
        'password': password

    }
})
    //i usually use then(...) instead of done(...)
    .then((response) => {
        sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
        $LOGIN.fadeToggle();
        $LOGOUT.toggle();
        $POST.fadeToggle();

    })
    .catch((error) => {
        console.log({ error });
    })

Теперь, когда вы можете прочитать ошибку в улове, вы можете добавить div к HTML и добавить к ней подробности ошибки

.catch ((error) => {
    console.log({ error });
    //be sure to read error object properties and pick one of them to append it
    //usually error from server should have an inner message                    
    document.getElementById('ServerErrorDiv').innerHtml(error.message)
})

Answer 2

.then(function(response){
        sessionStorage.setItem('newToken', response.token); //sets the key and value in the console application > session storage
                $LOGIN.fadeToggle();
        $LOGOUT.toggle();
         $POST.fadeToggle();

    })
    .catch((error)=>{
                            console.log({error});

                     //  alert(error.responseJSON.message)
                     $('#ServerErrorDiv').append(error.responseJSON.message)
                        })