HTTP POST utilizzando Angular.js

Question

Sono nuovo alla scena e voglio utilizzare Angular.js per fare una richiesta HTTP POST. Sto accedendo agli script PHP che hanno parametri che sono solo variabili POST. Ciò che viene restituito da ogni script è una stringa JSON. Normalmente in un modulo HTML è possibile effettuare una richiesta in tal senso come:

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

A seconda del vostro ingresso e dopo aver fatto clic Invia, JSON data1 tornerà qualcosa di simile: { "code" : 1 }

non ho accesso agli script o ai server che li ospitano.

Mi chiedevo se per Angular.js è possibile leggere i dati JSON1, abbinare i dati1 a quelli che sono definiti nei miei dati JSON2 e quindi inviarli alla mia vista (<pre>data2</pre>).

Per esempio, se { "code" : 1 } viene recuperato, voglio che il mio JSON per emettere il valore per il codice # 1:

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

Ecco il mio tentativo:

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

Tutto è distacco fino ad ora per la la vista è "Richiesta non riuscita" lol, sebbene stia elaborando HTTP/1.1 200. So che ho ancora un modo per andare ma apprezzerei qualsiasi aiuto. Una volta capito come inviare i dati JSON corretti1 alla vista, il passo successivo è la corrispondenza e l'output dei dati appropriati2. Grazie in anticipo!

Answer 1

Acctually il problema è nel backend con PHP non si recuperano i dati pubblicati come di consueto, questo ha funzionato per me:

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

nel file PHP:

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

Spero che questo Aiuto.

Answer 2

Una possibile alternativa è utilizzare un gestore di richieste XHR per serializzare il carico utile della richiesta 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); 
     } 
    }; 
}]); 

Inoltre, se non l'avete fatto prima, hai anche di cambiare il tipo di contenuto predefinito di intestazione della richiesta POST:

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

Recentemente ho scritto un post sul mio blog , dove è possibile trovare maggiori informazioni su questo approccio e XHR request interceptor.

Answer 3

Piuttosto vecchio post ... ma immagino che la mia soluzione potrebbe tornare utile anche per gli altri.

non mi piace la soluzione

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

...Fondamentalmente perché sembra contro buone pratiche (potrei sbagliarmi su questo)

Questo è quanto ho capito risolto (adattato per l'esempio precedente)

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

una volta che questo fatto

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

puoi accedere ai dati che normalmente utilizzeresti in PHP

$data = $_POST['data'];