Laravel 返回 JSON 响应 - JavaScript

Laravel 是一个流行的 PHP Web 开发框架，提供了许多功能和工具，以使 Web 应用程序更易于构建和维护。其中，提供了丰富的 JSON 响应功能，使得返回 JSON 数据变得更加便捷。

返回 JSON 响应

Laravel 提供了多种方法生成 JSON 响应，都可以通过 JavaScript 客户端来获取和处理。

基础用法

可以使用 response() 函数，传入一个数组作为响应体，并使用 json 方法定义响应头的 Content-Type：

return response()->json(['name' => 'John', 'age' => 30]);

上述代码将返回一个 JSON 响应体，其中包含了两个属性 name 和 age。在 JavaScript 中，可以使用 fetch() 方法发起请求并处理响应：

fetch('/api/user')
  .then(response => response.json())
  .then(data => console.log(data));

上述代码中，fetch() 方法返回一个 Promise 对象，使用 then() 方法来获取 JSON 格式的响应体，并将其输出到控制台。

带状态码的响应

可以使用 response() 函数的第二个参数，以设置 HTTP 响应状态码：

return response()->json(['error' => 'Unauthorized'], 401);

上述代码将返回一个状态码为 401 的 JSON 响应体，其中包含了一个 error 属性，代表未授权访问。在 JavaScript 中，可以使用 fetch() 方法的 catch() 方法来获取状态码并做出相应处理：

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw Error(response.status);
    }

    return response.json();
  })
  .then(data => console.log(data))
  .catch(status => console.error(`HTTP Error ${status}`));

上述代码中，使用 response.ok 属性判断请求是否成功，如果不成功则抛出一个错误，接着使用 catch() 方法捕获错误并输出状态码信息到控制台。

带头部信息的响应

可以使用 response() 函数的第三个参数，传入一个数组作为响应头部信息：

return response()->json(['name' => 'John'], 200, ['X-Header' => 'Custom']);

上述代码将返回一个带有自定义 X-Header 头部信息的 JSON 响应体，在 JavaScript 中可以使用 response.headers.get() 方法获取自定义头部信息：

fetch('/api/user')
  .then(response => {
    console.log(response.headers.get('X-Header'));

    return response.json();
  })
  .then(data => console.log(data));

上述代码中，使用 response.headers.get() 方法获取响应头部信息，并输出到控制台。

结论

以上是 Laravel 返回 JSON 响应的基本用法和常用技巧。开发者可以根据需要使用不同的方法返回不同的 JSON 响应体，并使用 JavaScript 访问和处理。