从jQuery的$就到角$ HTTP(from jquery $.ajax to angular $

2019-06-17 21:09发布

我有这一块的jQuery代码工作正常跨产地:

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

现在我特林将此转换为Angular.js代码没有任何成功:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

任何帮助表示赞赏。

Answer 1:

调用$ HTTP会是什么样的AngularJS方式:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

或者可以使用快捷方式编写更简单:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

有事情通知编号:

  • AngularJS版本更简洁(特别是使用.POST()方法)
  • AngularJS将转换JS对象转换成JSON字符串,并设置标题的护理(这些都是可定制)
  • 回调函数命名successerror分别为(也请注意每个回调的参数) -不赞成使用,角V1.5
  • then函数。
  • 的更多信息then使用可以发现这里

以上仅仅是一个简单的例子和一些指针,一定要检查AngularJS文档更多: http://docs.angularjs.org/api/ng.$http



Answer 2:

我们可以实现通过使用AngularJs HTTP服务,这有助于从远程服务器读取/加载数据的AJAX请求。

$ http服务方法在下面列出,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

其中一个实施例的:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/



Answer 3:

您可以使用此:

下载“角后修复”:“^ 0.1.0”

然后同时声明角模块添加“httpPostFix”到你的依赖。

参考: https://github.com/PabloDeGrote/angular-httppostfix



Answer 4:

你可以用$ .PARAM分配数据:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

看看这个: AngularJS +的ASP.NET Web API跨域问题



文章来源: from jquery $.ajax to angular $http