Ajax Call Back и Laravel

Question

Я создал API, в котором моя запись AJAX отправляет ему значения. AJAX публикует, а мой laravel API обрабатывает значения. Мои проблемы с обратным вызовом, возвращающим значение обратно в мой пост AJAX. Мой AJAX не возвращает результаты в разделе успеха, когда я веду консольный журнал. Я хотел бы, чтобы результаты моего API могли использовать данные для определения моего состояния. На данный момент консольный журнал даже не возвращает значение. Но в моем инспекторе chrome при предварительном просмотре он показывает ответ от моего API, но не в разделе успеха.

AJAX

var fname = "Joe";
var lname = "Test";
var processUrl = "api.example.com/z1";
$.ajax({
    type: 'POST',
    url: processUrl,
    data: {"name": fname,"surname": lname},
    dataType: 'json',
    success: function(res){
      console.log(res);
      if(res.length >= 1){
        $('#display').val(res.name);
      }
   }                            
});

PHP

public function checkResults(Request $request){
  $name = $request->name." ".$request->surname;

  $result = array();
  $result['name'] = [$name];

  return response()->json($result,201);
}

Answer 1

Для начала будет хорошо вернуться с 200 OK кодом ответа (вместо 201).

Примечание: Если вы хотите просто сразу получитьответ только на ваш вопрос, вы можете увидеть последнюю часть этого ответа (использование конструкции "done / fail" вместо "success / error").

Дополнительно:

Существует множество шаблонов, которые используются Client (Frontend) <-> API <-> Server (Backend) разработчиками. Приблизительно все API построены без каких-либо 500 кодов ошибок сервера. Но существует также много различий между структурами API.

1. Одним из них является отправка ответа следующим образом (это единственный пример ответа):

   return response()->json([
       'success' => true, // true or false
       'message' => "Message about success!",
   ], 200); // 200, 401, 403, 404, 409, etc
   

2. Другой подход состоит в том, чтобы всегда посылать 200 OK, но сообщение также может быть об ошибке:

   return response()->json([
       'success' => false, // true or false
       'code' => 404,
       'message' => "Resource not found!",
   ], 200);
   

Этот тип методов будет написан в try {} catch () и вернет только 200, но эти сообщения могут быть имитированы также как ошибка (как в примере).

Другой (подходящий для вас подход) заключается в изменении вашей функциональности Frontend AJAX следующим образом:

$.ajax({
    type: 'POST',
    url: processUrl,
    data: {
        {{--_token: "{{ csrf_token() }}",--}}
        name: fname,
        surname: lname
    },
    dataType: 'json'
}).done(function(res) {
    console.log(res);
    if(res.length >= 1) {
        $('#display').val(res.name);
    }
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error: " + textStatus);
});

AJAX .done ()функция заменяет метод .success (), который устарел в jQuery 1.8. Это альтернативная конструкция для функции обратного вызова success (как и раньше: «success: function () {...}»).

Функция AJAX .fail () заменяет метод .error (), который был объявлен устаревшим вjQuery 1.8. Это альтернативная конструкция для полной функции обратного вызова (как прежде: "error: function () {...}").

Примечание: обратный вызов .error () вызывается при ошибках HTTP, но также еслиСинтаксический анализ JSON ответа не удался. Это то, что, вероятно, происходит, если код ответа - 200/201, но вы все равно получаете сообщение об ошибке.

Answer 2

Из-за асинхронной природы вызовов Ajax не помещает их в обычный поток выполнения вашей программы. См. этот пост , чтобы получить больше информации.

Быстрое решение вашей проблемы - включить вызов ajax в функцию и вызывать эту функцию в любое время, когда вы хотите взаимодействовать с сервером асинхронно.

var fname = "Joe";
var lname = "Test";
var processUrl = "api.example.com/z1";
ajaxCall();

function ajaxCall() {
    $.ajax({
        type: 'POST',
        url: processUrl,
        data: {"name": fname,"surname": lname},
        dataType: 'json',
        success: function(res){
            console.log(res);
            if(res.length >= 1){
                $('#display').val(res.name);
            }
        },
        error: function() {     
            console.log('error');
        }           
    });
}

Кроме того, включите функцию ошибки в настройках вызова ajax для обработки случаев, когда запрос ajax не выполняется. См. этот ответ для альтернативных стилей выполнения этого.

Answer 3

Я полагаю, что это происходит, потому что вы отправляете код состояния 201 ( Создано ), но вам необходимо отправить код состояния 200 ( OK ), чтобы вызвать успехобратный вызов.

public function checkResults(Request $request){
  $name = $request->name." ".$request->surname;

  $result = array();
  $result['name'] = [$name];

  return response()->json($result,200);
}

Я не смог найти его специально в документации jQuery, но этот вопрос SO адресован ему.