Я новичок в этой сцене, и я хочу использовать Angular.js для запроса HTTP POST. Я обращаюсь к скриптам PHP, у которых есть параметры, которые являются только переменными POST. То, что возвращается от каждого скрипта, является строкой JSON. Обычно в форме HTML вы можете сделать такой запрос, как:
<form method="post" action="url.php"> <input name="this"> <input name="that"> <input value="Submit"> </form> В зависимости от вашего ввода и после нажатия кнопки «Отправить» JSON data1 вернет что-то вроде этого: { "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. Заранее спасибо!
На самом деле проблема в бэкэнд с 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;
Надеюсь, эта помощь.
Скорее старый пост … но я считаю, что мое решение может пригодиться и для других.
Мне не понравилось
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'];
Возможной альтернативой является использование обработчика запросов 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 .