Question

我正在使用AngularJS。我想通过AngularJS在HTTP帖子中发送多个数据。后端运行Cakephp，我已经验证了Rest API通过python HTTP-post工作。

我的控制器看起来像这样;

angular.module('myApp.controllers', []).
    controller('AlertDemoCtrl', ['$http', function($http) 
    {
        var post_url;
        var post_data;

        post_url="http://127.0.0.1/api_XXX/";

        post_data = {'data[Table1][field1]':'XX',
                     'data[Table2][0][field1]':'AA', 
                     'data[Table2][0][field2]':'BB', 
                     'data[Table2][0][field3]':'CC'
                    };

        $http.post(post_url, post_data);    
    }])

当我运行代码时，页面无法正确加载AngularJS。如果我评论$http.post(post_url, post_data);，则代码正常运行。我哪里出错了？

非常感谢你。

Answer 1

这里有两件事：

首先，对$http请求的响应通过AngularJS中的Promises处理。如果您计划对服务器返回的响应执行某些操作，则应尝试向代码添加Promise处理。来自官方AngularJS docs（v1.3.0）

// Simple POST request example (passing data) :
$http.post(post_url, post_data).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

其次，您可以尝试在函数中封装$http调用，然后在加载页面的整个AngularJS后，在事件上调用该函数。

angular.module('myApp.controllers', []).
controller('AlertDemoCtrl', ['$http', function($http) 
{
    var post_url;
    var post_data;

    post_url="http://127.0.0.1/api_XXX/";

    post_data = {'data[Table1][field1]':'XX',
                 'data[Table2][0][field1]':'AA', 
                 'data[Table2][0][field2]':'BB', 
                 'data[Table2][0][field3]':'CC'
                };

    $scope.fetch = function() {
        $http.post(post_url, post_data).success(function() {
            // handle response here
        }).error(function() {
            // handle error here
        });    
    }
}])

通过AngularJS发送带有多个数据的HTTP Post

1 个答案: