Angular JS中数据交互-$http-优快云博客

本文介绍了AngularJS中$http服务的基本用法，包括如何通过GET和POST方法进行远程数据请求，并展示了如何实现简单的登录功能。此外，还列举了AngularJS提供的各种快捷函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()