时间戳

首页 > 解决方案 > AngularJS：如何使用 $http.post 输入值并从 API url 接收数据

angularjs - AngularJS：如何使用 $http.post 输入值并从 API url 接收数据

问题描述

我正在学校做这个项目。他们要求我使用 $http.post 输入 2 值 Day 和 Customer 并在表中显示 json 数据。你能帮我解决这个问题吗，我研究了如何使用 $http.post 并修复代码，但它不起作用。请告诉我我误解了什么，或者还有其他方法可以完成这个。非常感谢你。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title> $http.post </title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script 
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script>

  <style>
    table,
    th,
    td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }

    table tr:nth-child(odd) {
      background-color: #f5f5f5;
    }

    table tr:nth-child(even) {
      background-color: #ffffff;
    }
  </style>
</head>

<body>

  <div ng-app="postapp" ng-controller="postservice">
    <div>
      Day : <input ng-model="day"><br /><br />
      Customer : <input ng-model="customer"><br /><br />
      <input type="button" value="Send" ng-click="postdata(day, customer)"> 
<br /><br />
    </div>

    <table>
      <tr>
        <th>ID</th>
        <th>Status</th>
        <th>Environment</th>
        <th>Host</th>
        <th>IP</th>
        <th>Description</th>
        <th>Time</th>
      </tr>
      <tr ng-repeat="x in names">
        <td>{{ x.ID}}</td>
        <td>{{ x.Status}}</td>
        <td>{{ x.Environment}}</td>
        <td>{{ x.Host}}</td>
        <td>{{ x.IP}}</td>
        <td>{{ x.Description}}</td>
        <td>{{ x.Time}}</td>
      </tr>
    </table>

  </div>

  <script>
    var app = angular.module('postapp', []);

    app.controller('postservice', function postservice($scope, $http) {
      $scope.day = null;
      $scope.customer = null;

      $scope.postdata = function(day, customer) {
        var data = {
          day: day,
          customer: customer
        };

        $http.post("https://b0gtju7vp5.execute-api.us-east- 
1.amazonaws.com/staging", JSON.stringify(data))
          .success(function(response) {
            $scope.names = response;
          });
      };
    });
  </script>

</body>

这是查看我必须做的事情，希望这会使它更清楚。查看图片

标签： angularjsapiurl

解决方案

让它变得活泼一点，并为你添加了一个加载微调器。

此外，由于请求是跨源的，即向与其运行的站点不同的 url 发出请求，您将需要在禁用 CORS 的情况下运行 Chrome。Chrome 默认会阻止这些请求，您必须将其关闭以进行开发。

在 windows 的运行框中粘贴以下内容：

chrome.exe --user-data-dir="C://Chrome-dev-session" --disable-web-security

如果您有 Mac 谷歌“如何在禁用 CORS 的情况下运行 Chrome”。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> $http.post </title>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
    </script>
    <style>
        table,
        th,
        td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

        table tr:nth-child(odd) {
            background-color: #f5f5f5;
        }

        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div ng-app="postapp" ng-controller="postservice">
        <!-- Loading spinner that will be shown when requst is in progres -->
        <div ng-if="isLoading">
            loading data...
        </div>
        <!-- Hide the page content when loading data -->
        <div ng-if="!isLoading">
            <div>
                Day :
                <input ng-model="day">
                <br />
                <br /> Customer :
                <input ng-model="customer">
                <br />
                <br />
                <input type="button" value="Send" ng-click="getNames(day, customer)">
                <br />
                <br />
            </div>
            <table>
                <tr>
                    <th>ID</th>
                    <th>Status</th>
                    <th>Environment</th>
                    <th>Host</th>
                    <th>IP</th>
                    <th>Description</th>
                    <th>Time</th>
                </tr>
                <tr ng-repeat="name in names">
                    <td>{{ name.ID}}</td>
                    <td>{{ name.Status}}</td>
                    <td>{{ name.Environment}}</td>
                    <td>{{ name.Host}}</td>
                    <td>{{ name.IP}}</td>
                    <td>{{ name.Description}}</td>
                    <td>{{ name.Time}}</td>
                </tr>
            </table>
        </div>
        <pre>{{names | json}}</pre>
    </div>
    <script>
        var app = angular.module('postapp', []);

        app.controller('postservice', function postservice($scope, $http) {
            $scope.day = null;
            $scope.customer = null;
            $scope.names = [];
            $scope.isLoading = false;

            $scope.getNames = function (day, customer) {
                $scope.isLoading = true;
                var data = {
                    day: day,
                    customer: customer
                };
                var url = "https://b0gtju7vp5.execute-api.us-east-1.amazonaws.com/staging";

                $http.post(url, data)
                    .then(
                        function (response) {
                            $scope.names = response;
                            $scope.isLoading = false;
                        },
                        function (error) {
                            alert('Failed to post data');
                            $scope.isLoading = false;
                        });
            };
        });
    </script>
</body>

</html>

推荐阅读