从 jquery $.ajax 到 angular $http
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12131659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
from jquery $.ajax to angular $http
提问by Endless
I have this piece of jQuery code that works fine cross origin:
我有这段 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");
}
});
Now I'm tring to convert this to Angular.js code without any success:
现在我正在尝试将其转换为 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;
});
Any help appreciated.
任何帮助表示赞赏。
回答by pkozlowski.opensource
The AngularJS way of calling $http would look like:
AngularJS 调用 $http 的方式如下：
$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;
});
or could be written even simpler using shortcut methods:
或者可以使用快捷方法写得更简单：
$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);
There are number of things to notice:
有很多事情需要注意：
- AngularJS version is more concise (especially using .post() method)
- AngularJS will take care of converting JS objects into JSON string and setting headers (those are customizable)
- Callback functions are named
successanderrorrespectively (also please note parameters of each callback) - Deprecated in angular v1.5 - use
thenfunction instead. - More info of
thenusage can be found here
- AngularJS 版本更简洁（尤其是使用 .post() 方法）
- AngularJS 将负责将 JS 对象转换为 JSON 字符串并设置标头（这些是可定制的）
- 回调函数命名
success，并error分别（也取悦每个回调的音符参数） -已过时的角度V1.5 - 改用
then函数。 then可以在此处找到更多使用信息
The above is just a quick example and some pointers, be sure to check AngularJS documentation for more: http://docs.angularjs.org/api/ng.$http
以上只是一个简单的例子和一些提示，请务必查看 AngularJS 文档以获取更多信息：http: //docs.angularjs.org/api/ng.$http
回答by Vijayaragavan
We can implement ajax request by using http service in AngularJs, which helps to read/load data from remote server.
我们可以通过使用 AngularJs 中的 http 服务来实现 ajax 请求，这有助于从远程服务器读取/加载数据。
$http service methods are listed below,
$http 服务方法如下，
$http.get()
$http.post()
$http.delete()
$http.head()
$http.jsonp()
$http.patch()
$http.put()
One of the Example:
示例之一：
$http.get("sample.php")
.success(function(response) {
$scope.getting = response.data; // response.data is an array
}).error(){
// Error callback will trigger
});
回答by Tewfik Ghariani
You may use this :
你可以使用这个：
Download "angular-post-fix": "^0.1.0"
下载“angular-post-fix”：“^0.1.0”
Then add 'httpPostFix' to your dependencies while declaring the angular module.
然后在声明 angular 模块的同时将“httpPostFix”添加到您的依赖项中。
回答by hanane
you can use $.param to assign data :
您可以使用 $.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;
});
look at this : AngularJS + ASP.NET Web API Cross-Domain Issue
