HTTP POST przy użyciu Angular.js

Question

Jestem nowy na scenie i chcę użyć Angular.js do utworzenia żądania HTTP POST. Mam dostęp do skryptów PHP, które mają parametry, które są po prostu zmiennymi POST. To, co jest zwracane z każdego skryptu, jest łańcuchem JSON. Zazwyczaj w postaci HTML można zrobić taką prośbę jak:

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

zależności od wejścia, a po kliknięciu przedstawienia, JSON dane1 powróci coś takiego: { "code" : 1 }

nie mam dostępu do skryptów lub do serwerów, które je hostują.

Zastanawiam się, czy Angular.js może odczytać dane JSON1, dopasować dane1 do tego, co zdefiniowano w moich danych JSON2, a następnie wypisać je do mojego widoku (<pre>data2</pre>).

Na przykład, jeśli { "code" : 1 } jest pobierany, chcę mój JSON do wyprowadzania wartości dla kodu # 1:

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

Oto moja próba:

<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; 
    }; 
} 

Wszystko to delegowania tak daleko na view to "Żądanie nie powiodło się" lol, mimo że przetwarza HTTP/1.1 200. Wiem, że nadal mam sposoby, aby przejść, ale byłbym wdzięczny za każdą pomoc. Kiedy wymyślę, jak opublikować odpowiednie dane JSON1 w widoku, następnym krokiem jest dopasowanie i wyprowadzenie odpowiednich danych2. Z góry dziękuję!

Answer 1

acctually problem jest w backend PHP nie odzyskać dane zamieszczone jak zwykle, to pracował dla mnie:

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; 
    }; 
} 

w pliku PHP:

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

nadzieję, że ten Wsparcie.

Answer 2

Ewentualną alternatywą jest użycie procedury obsługi żądań XHR do serializowania ładunku żądania 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); 
     } 
    }; 
}]); 

Ponadto, jeśli nie zrobiłeś tego wcześniej, masz również zmienić domyślny nagłówek Content-Type żądania postu:

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

Ostatnio napisałem post na moim blogu , gdzie można znaleźć więcej informacji na temat tego podejścia i XHR request interceptor.

Answer 3

Raczej stary post ... ale sądzę, że moje rozwiązanie może się przydać także innym osobom.

mi się nie podoba rozwiązanie

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

...Zasadniczo, ponieważ wydaje się na dobrej praktyce (może się mylę w tej sprawie)

To jak mam go rozwiązać (dostosowany do powyższego przykładu)

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; 
    }; 
} 

raz to zrobić

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

możesz uzyskać dostęp do danych, które normalnie można uzyskać w PHP:

$data = $_POST['data'];