web-dev-qa-db-fra.com

HTTP POST using Angular.js

Je suis nouveau sur la scène et je veux utiliser Angular.js pour faire une requête HTTP POST. J'accède à PHP scripts qui ont des paramètres qui ne sont que des variables POST. Ce qui est renvoyé par chaque script est une chaîne JSON. Normalement, dans un formulaire HTML, vous pouvez faire une telle demande comme:

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

Selon votre saisie et après avoir cliqué sur soumettre, JSON data1 renverra quelque chose comme ceci: { "code" : 1 }

Je n'ai pas accès aux scripts ni aux serveurs qui les hébergent.

Je me demandais s'il était possible pour Angular.js de lire les données JSON1, de faire correspondre ces données1 à ce qu'elles sont définies dans mes données JSON2, puis de les afficher dans ma vue (<pre>data2</pre>).

Par exemple, si { "code" : 1 } est récupéré, je veux que mon JSON affiche la valeur du code # 1:

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

Voici ma tentative:

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

Pour l'instant, tout ce qu'il affiche est "Requête a échoué" lol, bien qu'il traite HTTP/1.1 200. Je sais que j'ai encore du chemin à faire, mais j'apprécierais toute aide. Une fois que j'ai compris comment publier les données JSON1 appropriées dans la vue, l'étape suivante consiste à faire correspondre et à sortir les données2 appropriées. Merci d'avance!

phpjavascriptjsonangularjshttp-post
19
matenji

En fait, le problème est dans le backend avec PHP vous ne récupérez pas les données publiées comme d'habitude, cela a fonctionné pour moi:

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

dans le fichier PHP:

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

J'espère que cette aide.

46
Yahya KACEM

Plutôt vieux poste ... mais je pense que ma solution pourrait également être utile pour les autres.

Je n'ai pas aimé le

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

solution ... Fondamentalement parce que cela semble contraire aux bonnes pratiques (je me trompe peut-être)

Voici comment je l'ai résolu (adapté à l'exemple ci-dessus)

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

une fois cela fait

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

vous pouvez accéder aux données que vous auriez normalement en PHP

$data = $_POST['data'];
21
dGo

Une alternative possible consiste à utiliser un gestionnaire de requêtes XHR pour sérialiser la charge utile de la requête 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);
        }
    };
}]);

De plus, si vous ne l'avez pas fait auparavant, vous devez également modifier l'en-tête de type de contenu par défaut de la demande de publication:

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

Récemment, j'ai écrit un article sur mon blog, où vous pouvez trouver plus d'informations sur cette approche, et intercepteur de demande XHR .

4
Bruno