Laravel 返回响应 JSON - JavaScript

简介

Laravel 是一个流行的 PHP 框架，它提供了非常多的工具和功能，使得开发者可以快速构建高效的应用程序。其中，返回 JSON 响应是 Laravel 中经常涉及到的一个功能，在本文中，我们将介绍如何在 JavaScript 中处理由 Laravel 返回的 JSON 响应。

使用 XMLHttpRequest

XMLHttpRequest 是一个用于向服务器发送请求和从服务器接收响应的 API，可以通过它获取 Laravel 返回的 JSON 数据。

以下是 JavaScript 中使用 XMLHttpRequest 通过 Laravel 返回 JSON 数据的基本示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.open("GET", "/api/users", true);
xhr.send();

在上面的代码中，我们定义了一个 XMLHttpRequest 实例，并通过 open 方法打开一个 GET 请求，请求的地址是 /api/users。在这个示例中，我们假设 Laravel 中有一个 API，用于返回用户数据。

当请求完成后，我们通过 onreadystatechange 事件的回调函数来处理响应。在回调函数中，我们首先判断响应的状态是否为 200，然后使用 JSON.parse 方法把响应内容解析为 JSON 对象。

最后，我们将解析后的 JSON 对象输出到控制台中。这样，我们就可以在 JavaScript 中访问 Laravel 返回的 JSON 数据了。

使用 fetch API

fetch API 是一种现代的 JavaScript API，它也可以用来获取 Laravel 返回的 JSON 数据。

以下是 JavaScript 中使用 fetch API 通过 Laravel 返回 JSON 数据的基本示例：

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

在上面的代码中，我们使用了 fetch 方法来发起 GET 请求，请求的地址依然是 /api/users。在请求完成后，我们使用 response.json() 方法将响应解析为 JSON 对象，并通过 then 方法来处理解析后的 JSON 数据。

如果请求失败，则可以通过 catch 方法来处理错误信息。

总结

在这篇文章中，我们介绍了如何在 JavaScript 中处理由 Laravel 返回的 JSON 数据。具体来说，我们介绍了两种方法：使用 XMLHttpRequest 和使用 fetch API。

使用 XMLHttpRequest 需要手动处理响应，但是支持更多的自定义。而使用 fetch API 则更为简单，但也更为限制。不同的应用场景可以选择不同的方法来获取 Laravel 返回的 JSON 数据。