20

我是新手，我想使用 Angular.js 发出 HTTP POST 请求。我正在访问具有只是 POST 变量的参数的 PHP 脚本。每个脚本返回的是一个 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 数据 1，将该数据 1 与它们在我的 JSON 数据 2 中定义的内容相匹配，然后将它们输出到我的视图 ( <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;   
    };
}

到目前为止，它发布到视图的所有内容都是“请求失败”大声笑，尽管它正在处理 HTTP/1.1 200。我知道我还有很长的路要走，但我会很感激任何帮助。一旦我弄清楚如何将正确的 JSON 数据 1 发布到视图中，下一步就是匹配并输出相应的数据 2。先感谢您！

4

3 回答 3

48

实际上，问题出在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;

希望这有帮助。

于 2013-03-29T20:45:31.920 回答
21

相当老的帖子......但我认为我的解决方案也可能对其他人有用。

我不喜欢

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'];
于 2014-06-16T12:14:45.553 回答
4

一种可能的替代方法是使用 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);
        }
    };
}]);

此外，如果您之前没有这样做，您还必须更改 post 请求的默认 content-type 标头：

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

最近我在我的博客上写了一篇文章，您可以在其中找到有关此方法和XHR 请求拦截器的更多信息。

于 2013-11-20T18:07:51.707 回答