AngularJS: Как использовать $ http.post для ввода значения и получения данных из URL-адреса API - PullRequest
Новая
       3

AngularJS: Как использовать $ http.post для ввода значения и получения данных из URL-адреса API

0 голосов
/ 07 января 2019

Я работаю над проектом в школе. Они попросили меня использовать $ 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>

Вот посмотрите, что я должен сделать, надеюсь, это сделает это более наглядно. Просмотр картинки

1 Ответ

0 голосов
/ 07 января 2019

Немного потряхнул и добавил загрузчик.

Кроме того, если запрос является перекрестным источником, т. Е. При отправке запроса на URL, отличный от сайта, на котором он работает, вам потребуется запустить Chrome с отключенным CORS. Chrome блокирует эти запросы по умолчанию, и вы должны переключить его для разработки.

В окне запуска в Windows вставьте следующее:

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

Если у вас есть Mac Google 'Как запустить Chrome с отключенным CORS'. 

<code><!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}}
var app = angular.module ('postapp', []); app.controller ('postservice', функция postservice ($ scope, $ http) { $ scope.day = null; $ scope.customer = null; $ scope.names = []; $ scope.isLoading = false; $ scope.getNames = function (day, customer) { $ scope.isLoading = true; var data = { день: день, клиент: клиент }; var url = "https://b0gtju7vp5.execute -api.us-east-1.amazonaws.com / staging"; $ http.post (url, data) .затем( функция (ответ) { $ scope.names = response; $ scope.isLoading = false; }, функция (ошибка) { alert («Не удалось опубликовать данные»); $ scope.isLoading = false; }); }; });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...