AngularJS 测验 | 网络技术问题 | 第 2 组 | 问题 13

问题描述

如何使用 AngularJS 发送一个 POST 请求，并在接收到响应后更新 UI？

解决方案

在 AngularJS 中，可以使用 $http 服务来发送 HTTP 请求。以下是一个使用 $http.post() 方法发送 POST 请求的示例：

$http.post('/api/data', { name: 'John', age: 30 })
  .then(function(response) {
    // 响应处理逻辑
  }, function(error) {
    // 错误处理逻辑
  });

在上述代码中，我们向 /api/data 路径发送了一个包含 name 和 age 属性的 JSON 对象。$http.post() 方法返回一个 promise 对象，我们可以使用 .then() 方法来处理响应和错误。

在响应处理逻辑中，我们可以使用响应对象的 data 属性来获取从服务器返回的数据。例如，如果服务器返回了一个包含 greeting 属性的 JSON 对象，我们可以使用以下代码来将其显示在页面上：

$http.post('/api/greeting', { name: 'John' })
  .then(function(response) {
    // 将服务器的问候语显示在页面上
    $scope.greeting = response.data.greeting;
  }, function(error) {
    // 错误处理逻辑
  });

上述代码中，我们将响应对象的 greeting 属性赋值给了 $scope.greeting 变量，从而在页面上显示了服务器的问候语。

总结

AngularJS 提供了方便的 $http 服务来发送 HTTP 请求。使用 $http.post() 方法可以轻松地向服务器发送一个 POST 请求，并在接收到响应后更新 UI。在处理响应和错误时，我们应该使用 promise 对象的 .then() 方法。