Rumah > Artikel > hujung hadapan web > AngularJS内置服务$http怎么使用？angularjs$http的使用实例

AngularJS内置服务$http怎么使用？angularjs$http的使用实例

寻∝梦asal: 2018-09-08 14:54:361446semak imbas

本篇文章详细的介绍了关于angularjs的内置服务$http的介绍。angularjs中的$http有哪些语法，怎么使用都在里面，还有完整的代码都在文章里。现在就让我们一起来看看这篇文章吧

AngularJS 内置服务 $http

AngularJS为我们提供了大量的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了，如：

$window：用于注入原生JS中的window对象

$document：用于注入原生JS中的document文档对象

$timeout：用于注入封装的原生JS中的setTimeout()函数处理过程

$interval：用于注入封装的原生JS中的setInterval()函数处理过程

$location：用于注入原生JS中的location对象方便对于URL地址等操作

$http：用于注入封装的Ajax操作进行异步数据请求等等

今天我们主要来讲解一下AngularJS内置服务中的 $http。

$http:

$http服务是AngularJS的核心服务之一，这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求！

常规的语法结构：

$http({
	method:”GET”,/* 请求发送方式 */
	url:”http://......../com” /* 请求地址*/
}).then( /* then()函数表示请求完成之后的操作 */
	function(response) {
		/* 请求成功之后的操作函数 */
　　},
　　function(response) {
　　	/* 请求失败时候的操作函数 */
　　}
);

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)函数进行异步数据处理。（想看更多就到PHP中文网AngularJS开发手册中学习）

我们来举个简单的小案例来演示一下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<p class="form" ng-controller="login">
    账号：<input type="text" ng-model="username"><br />
    密码：<input type="text" ng-model="password"><br />
    <button ng-click="loginFn()">登录</button>
</p>
<script>
    var app = angular.module("myApp", []);

    app.controller("login", ["$scope", "$http",
        function($scope, $http) {

            $scope.loginFn = function() {
                // 实现登录
                $http({
                    method:"GET",
                    url:"服务器地址",
                    params:{status:"login",userID:$scope.username, password:$scope.password}
                    /*
                    如果是get请求，请使用params来传递参数
                    如果是Post请求，请使用data来尝试传递参数
                     */
                }).then(
                    function success(resp) {
                        console.log("请求成功", resp);
                        if(resp.data) {
                            console.log("登录成功，跳转到首页");
                        } else {
                            console.log("登录失败");
                        }
                    },
                    function error(resp){
                        console.log("请求失败");
                    }
                );
            }
    }]);
</script>
</body>
</html>

一个简单的登录功能页面。希望可以帮助到大家~

本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci AngularJS内置服务$http怎么使用？angularjs$http的使用实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php ajax 封装 delete JS 对象异步 location http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：AngularJS表达式如何使用？angularjs的表达式的使用详解Artikel seterusnya：AngularJS怎么上传文件？angularjs上传功能的详细介绍

Artikel berkaitan

Lihat lagi