web-dev-qa-db-ja.com

HTTP POST Angular.jsを使用

私はシーンに慣れていないので、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がJSON data1を読み取り、そのdata1を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」です（HTTP/1.1 200を処理しています）。まだ方法はありますが、助けていただければ幸いです。適切なJSON data1をビューに投稿する方法を理解したら、次のステップは適切なdata2を照合して出力することです。前もって感謝します！

phpjavascriptjsonangularjshttp-post
19
matenji

実際、問題は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;

この助けを願っています。

46
Yahya KACEM

むしろ古い投稿...しかし、私は私のソリューションが他の人にとっても役に立つかもしれないと思います。

私は好きではなかった

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'];
21
dGo

可能な代替方法は、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要求インターセプター を見つけることができます。

4
Bruno