Ошибка в обработке Ajax "выполнено" и "не выполнено"

Question

Я столкнулся со странной проблемой ...

Ожидаемое поведение: Если запрос успешен, на странице отображается простое предупреждение (просто для проверки, работает ли он).Если произойдет сбой, он должен показать сообщение об ошибке в div.

$(function() {
    $('.error').hide(); 
    $("#form").on('submit', function(e) {

        e.preventDefault();

        $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  
            }
        });

        $.ajax({
            type: 'POST',
            data: $(this).serialize(),
            url: '{{ route("admin.categories.store") }}'
        })
            .done(function(data) {
                $('.error').hide();
                alert(data.message.name); //simple alert just to check if it works
            })
            .fail(function(jqXHR) {
                errorMessage = jqXHR.responseText;
                $('.error').text(errorMessage . "<br>"); // not sure why this line is making the DONE part stop working.
                $('.error').show();
            }); 


    });
  });

Если я произвожу сбой, он работает, но в случае успеха он возвращает мне только необработанный json:

{"message": {"_ token": "lkqlTHGPQBWEVIAQvO8pWs8ORAsSifGyR2TDBEPo", "name": "test", "submit": "Создать категорию"}}

Язаметил, что если я удалю часть $('.error').text(errorMessage . "<br>");, ошибка исчезнет, ​​и сценарий «успеха» сработает.

Есть идеи?

Answer 1

Заменить

$('.error').text(errorMessage . "<br>");

К

$('.error').text(errorMessage + "<br>");