HTTP POST с использованием Angular.js

Я новичок в этой сцене, и я хочу использовать Angular.js для создания HTTP POST-запроса. Я обращаюсь к скриптам PHP, у которых есть параметры, которые являются только переменными POST. То, что возвращается из каждого script, является строкой JSON. Обычно в форме HTML вы можете сделать такой запрос, как:

<form method="post" action="url.php">
<input name="this">
<input name="that">
<input value="Submit">
</form>

В зависимости от вашего ввода и после нажатия кнопки "Отправить" данные JSON1 возвратят что-то вроде этого: { "code" : 1 }

У меня нет доступа к скриптам или серверам, которые их размещают.

Мне было интересно, возможно ли Angular.js читать данные JSON1, сопоставлять эти данные1 с тем, что они определены в моем JSON data2, а затем выводить их на мой просмотр (<pre>data2</pre>).

Например, если { "code" : 1 } извлекается, я хочу, чтобы мой JSON вывел значение для кода # 1:

{ "code" : [
  { 1: "User already logged in." }, 
  { 2: "Wrong parameters, try again."}, 
  { 3: "etc., etc." }
 ] 
};

Здесь моя попытка:

<form ng-controller="PhpCtrl" name="f1">
<input type="text" name="name">
<input type="text" name="password">
<pre ng-model="codeStatus">{{codeStatus}}</pre>
<input type="submit" ng-click="add()" value="Submit">
</form>

function PhpCtrl($scope, $http, $templateCache) {
    $scope.method = 'POST';
    $scope.url = 'url.php';
    $scope.codeStatus = "";

    $scope.add = function() {

        $http({
            method: $scope.method, 
            url: $scope.url,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},  
            cache: $templateCache
        }).
        success(function(response) {
            $scope.codeStatus = response.data;
        }).
        error(function(response) {
            $scope.codeStatus = response || "Request failed";
        });
        return false;   
    };
}

Все, что он опубликовал до представления, это "Request failed" lol, хотя он обрабатывает HTTP/1.1 200. Я знаю, что у меня все еще есть способы пойти, но я был бы признателен за любую помощь. Как только я выясню, как отправить надлежащие данные JSON1 в представление, следующим шагом будет сопоставление и вывод соответствующих данных2. Заранее благодарю вас!

Ответы

Ответ 1

На самом деле проблема в бэкэнд с PHP: вы не извлекаете опубликованные данные, как обычно, это сработало для меня:

function PhpCtrl($scope, $http, $templateCache) {
  var method = 'POST';
  var url = 'url.php';
  $scope.codeStatus = "";
  $scope.add = function() {
    var FormData = {
      'name' : document.f1.name.value,
      'password' : document.f1.password.value
    };
    $http({
      method: method,
      url: url,
      data: FormData,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      cache: $templateCache
    }).
    success(function(response) {
        $scope.codeStatus = response.data;
    }).
    error(function(response) {
        $scope.codeStatus = response || "Request failed";
    });
    return false;
  };
}

в файле PHP:

$data = json_decode(file_get_contents("php://input"));
echo $data->name;

Надеюсь на эту помощь.

Ответ 2

Скорее старый пост... но я считаю, что мое решение может пригодиться и для других.

Мне не понравился

json_decode(file_get_contents("php://input"));

Решение... В основном потому, что это кажется хорошей практикой (возможно, я ошибаюсь)

Вот как я его решил (адаптирован к приведенному выше примеру)

function PhpCtrl($scope, $http, $templateCache) {
  var method = 'POST';
  var url = 'url.php';
  $scope.codeStatus = "";
  $scope.add = function() {
    var FormData = {
      'name' : document.f1.name.value,
      'password' : document.f1.password.value
    };
    $http({
      method: method,
      url: url,
      data: $.param({'data' : FormData}),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      cache: $templateCache
    }).
    success(function(response) {
        $scope.codeStatus = response.data;
    }).
    error(function(response) {
        $scope.codeStatus = response || "Request failed";
    });
    return false;
  };
}

после выполнения этого

data: $.param({'data' : FormData}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'},

вы можете получить доступ к данным, которые вы обычно используете в PHP

$data = $_POST['data'];

Ответ 3

Возможной альтернативой является использование обработчика запросов XHR для сериализации полезной нагрузки запроса POST.

$httpProvider.interceptors.push(['$q', function($q) {
    return {
        request: function(config) {
            if (config.data && typeof config.data === 'object') {
                // Check https://gist.github.com/brunoscopelliti/7492579 for a possible way to implement the serialize function.
                config.data = serialize(config.data);
            }
            return config || $q.when(config);
        }
    };
}]);

Кроме того, если вы не делали этого раньше, вы также должны изменить заголовок типа содержимого по умолчанию для запроса на отправку:

$http.defaults.headers.post["Content-Type"] = 
    "application/x-www-form-urlencoded; charset=UTF-8;";

Недавно я написал сообщение в своем блоге, где вы могли найти дополнительную информацию об этом подходе, и XHR-запрос-перехватчик.