【问题标题】:Get data from angular post method从角度发布方法获取数据
【发布时间】:2015-12-31 06:23:16
【问题描述】:

我有一个带有 http.post 请求的角度控制器,但我没有得到响应,该服务运行良好,因为使用邮递员对其进行了测试。

当页面加载时,我需要在 HTLM 表中显示来自 WS 的数据(我知道如何做这部分),我正在发送变量名称“data”中的请求正文,变量名称“config”中的标头配置以及对我的 WS 的 URL 的 http.post 调用。

我是 Angular 新手,所以我不知道我是否遗漏了什么,我也想在控制台中打印响应以测试它是否返回了我所期望的。

我从网上找到的示例中获取了此代码并对其进行了修改,在示例中,有一个按钮可以调用 SendData() 函数,但我不需要按钮,调用必须为页面已加载。

这是控制器代码

.controller("HttpGetTestController", function ($scope, $http) {
    $scope.SendData = function () {
        var data = {
            "userId":"mdrodri",
            "token":"840430482834947828876768058086529370654",
            "domain":"MX",
            "filters":{
                "timeFrameType":"Week (FiscalYear)",
                "custMembSelectionType":"TOTAL",
                "locationSelectionType":"Country",
                "merchandiseSelectionType":"SBU",
                "startYear":"2015",
                "endYear":"2015",
                "startUnit":"1",
                "endUnit":"1",
                "comparator":false,
                "locationSelections":["CA"],
                "merchandiseSelections":["SBU38"],
                "custMembSelections":["TOTAL"],
                "metricSelections":["Product Sales (Category Rank)"],
                "rankOrder":"10"
            },
            "additionalFilters":[],
            "cache":false
        };

        var config = {
            headers : {
                'Content-Type': 'application/json;'
            }
        }

        $http.post('http://whateverurl/', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
                console.log("Success");
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    console.log("Data: " + data);
                    console.log("Status: " + status);
                    console.log("Headers: " + header);
                    console.log("Config: " + config);
            });

    };

})

在我的 HTML 中,这就是我调用该控制器的方式

 <div class="panel panel-default" ng-controller="HttpGetTestController">

感谢您的时间和帮助。

【问题讨论】:

  • http://whateverurl/ 是否支持CORS?如果不是,由于浏览器内置的相同来源策略限制,您将无法从不同的域调用它。这解释了为什么您的请求在由 Postman 发出但不在浏览器中使用 AJAX 时有效。只需查看浏览器的控制台,您就会看到请求已被阻止的警告。
  • 服务器必须启用CORS头,你必须添加$httpProvider.defaults.useXDomain = true;
  • 实际上我在本地网络上工作,我检查了我的控制台,里面什么都没有。 :(
  • @AlbertCyber​​hulk 我应该在哪里添加 $httpProvider 的东西?因为我和我的头类型在配置变量中。
  • 您能在浏览器的“网络”选项卡中看到正在发送的请求吗?

标签: javascript angularjs


【解决方案1】:

您需要在控制器中调用 $scope.SendData() 函数:

      .controller("HttpGetTestController", function ($scope, $http) {
        $scope.SendData = function () {
           //your code ...
         }
       //then the calling 
       $scope.SendData();//here
}

【讨论】:

  • 嗨@AhmedAbdelraouf 我添加了那行,但什么也没发生... :(
  • 你在html文件中包含了控制器js文件吗?
  • 是的,实际上我有另一个控制器,但那个控制器正在读取一个 json,我做了这个来测试 angular 是否正常工作,然后我创建了这个控制器来使用 WS 但什么也没发生,我可以意识到我的代码是否正确?
  • 尝试添加调试器;或控制器开头和函数内部的断点,并从浏览器打开开发人员工具并刷新您的 html 页面,如果它在控制器中命中,这意味着 html 知道 div 块属于该角度控制器
  • 它的 post 或 get 是否只使用您的 PostDataResponse 并不重要,因此当请求成功时,对象将被初始化并且绑定将起作用 {{x.Name}} {{x.Country}}
猜你喜欢
  • 2022-09-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-20
  • 1970-01-01
  • 2019-10-03
相关资源
最近更新 更多