43.$http
2024-09-05 16:42:16
转自:https://www.cnblogs.com/best/tag/Angular/
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
使用格式:
// 简单的 GET 请求,可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
简写方法
POST 与 GET 简写方法格式:
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
此外还有以下简写方法:
- $http.get
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
更详细内容可参见:
读取 JSON 文件
以下是存储在web服务器上的 JSON 文件:
{
"sites": [
{
"Name": "菜鸟教程",
"Url": "www.runoob.com",
"Country": "CN"
},
{
"Name": "Google",
"Url": "www.google.com",
"Country": "USA"
},
{
"Name": "Facebook",
"Url": "www.facebook.com",
"Country": "USA"
},
{
"Name": "微博",
"Url": "www.weibo.com",
"Country": "CN"
}
]
}
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="siteCtrl"> <ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul> </div> <script>
var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'http://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
}); });
</script> </body>
</html>
3.
简写方法实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="siteCtrl"> <ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul> </div> <script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.then(function (response) {$scope.names = response.data.sites;});
});
</script> </body>
</html>
4.
AngularJS1.5 以下版本 - 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="siteCtrl"> <ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul> </div> <script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script> </body>
</html>
最新文章
- webpack搭建前端一条龙服务
- Jenkins+Maven+SVN快速搭建持续集成环境
- pyspider 安装时 Could not run curl-config
- js常用
- C#学习系列-抽象方法与虚拟方法的区别
- mysql 5.6.33 重置密码后报错
- 数据库测试DbUnit
- Java性能优化权威指南-读书笔记(二)-JVM性能调优-概述
- python报错ordinal not in range(128)
- My Linux API
- eclipse中不能找到dubbo.xsd解决方法
- php 编译安装curl 时候出现问题
- EF调用存储过程实例
- 合理设计C代码 函数笔记
- C# 并行任务——Parallel类
- JavaBean入门笔记
- Coins HDU - 2844
- 如何配置JVM系统属性及获取方式System.getProperty(";pname";)
- Debian、Ubuntu恢复误删除(或者说重装)的/var/lib/dpkg
- BZOJ4551[Tjoi2016&;Heoi2016]树——dfs序+线段树/树链剖分+线段树
热门文章
- 用​M​y​E​c​l​i​p​s​e​ ​打​包​J​A​R文件
- cocos2d-x 移植到android中编译的一些问题:fatal error: Box2D/Box2D.h: No such file or directory&;quot;
- [jzoj 5926] [NOIP2018模拟10.25] naive 的图 解题报告(kruskal重构树+二维数点)
- Eclipse里Tomcat报错:Document base ……does not exist or is not a readable directory(图文详解)
- C++之虚函数表
- POJ 1273 Drainage Ditches【最大流】
- LR编写post请求
- SpringCloud学习笔记(17)----Spring Cloud Netflix之服务网关Zuul的使用
- Hadoop2.x 关于日志文件位置
- Html标记语言学习一2017年6月12日