Angular JS中数据交互-$http
$http是Angular JS中内置核心服务之一,
这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式
用于远程数据请求,数据交互等!基本语法结构:
$http({
method:”GET”,/* 请求发送方式 */
url:”http://......../com” /* 请求地址*/
}).then( /* then()函数表示请求完成之后的操作 */
function(response) {
/* 请求成功之后的操作函数 */
},
function(response) {
/* 请求失败时候的操作函数 */
}
);
示例如下-完成简单的注册功能:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/angular-1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
用户名:<input type="text" ng-model="username"><br>
密 码:<input type="text" ng-model="password"><br>
<button ng-click="btn_login()">登录</button>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("myCtrl",["$scope","$http",function($scope,$http){
$scope.btn_login=function(){
$http({
method:"get",
url:"http://datainfo.duapp.com/shopdata/userinfo.php",
params:{
status:"login",
userID:$scope.username,
password:$scope.password
}
}).then(
function success(resp){
console.log("请求成功"+resp)
if(resp.data instanceof Object){ //判断返回数据是否为对象
console.log("登录成功,跳转至首页")
}else{
console.log("登录失败")
}
},
function error(resp){
console.log("请求失败");
}
)
}
}])
</script>
</html>
注:
1.如果发送请求方法为"post"相对应的数据存放在data中;
2.如果发送请求方法为"get"相对应的数据存放在params中;
3.返回的数据判断是否为一个对象时可用instanceof;
AngularJS为了方便开发人员进行快捷的异步数据请求的处理,提供了一系列的快捷函数方便开发,主要由如下的函数:
l $http.get()
l $http.post()
l $http.jsonp()
l $http.header()
l $http.patch()
l $http.put()
l $http.delete()
$http.get(“url”).then(fn1, fn2);
其实快捷方式,就是简单的封装了$http服务,常规项目开发时,使用较多的是原始的内置服务$http的$http({}).then(fn1, fn2)函数进行异步数据处理。