Ajax 回调和 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）。

注意：如果您只想立即获得问题的答案，您可以查看此答案的最后一部分（使用“完成/失败”构造而不是“成功/错误” ")。

补充：

Client(Frontend)APIServer(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，但该消息也可以被模仿为错误（如示例中所示）。

1. 另一个（适合你的方法）是像这样改变你的前端 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() 函数替换了 jQuery 1.8 中已弃用的方法 .success()。这是成功回调函数的另一种构造（如之前：“success: function(){...}”）。

AJAX .fail() 函数替换了 jQuery 1.8 中已弃用的方法 .error()。这是完整回调函数的替代构造（如之前：“error: function(){...}”）。

注意：在 HTTP 错误时调用 .error() 回调，但如果响应的 JSON 解析失败，也会调用。如果响应代码为 200/201 但您仍然被抛出错误回调，这可能会发生这种情况。

Answer 2

我相信这是因为您正在发送状态码 201 (Created)，但您需要发送状态码 200 (OK) 才能触发成功回调。

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

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

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

我无法在 jQuery 文档中专门找到它，但这个 SO question 解决了它。

Answer 3

由于 Ajax 调用的异步特性，不要将它们放入程序的正常执行流程中。请参阅this post 了解更多信息。

快速解决您的问题的方法是将 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 请求失败的情况。请参阅this answer 了解其他方式。