search

Home  >  Article  >  Web Front-end  >  How to use AngularJS built-in service $http? Usage examples of angularjs$http

How to use AngularJS built-in service $http? Usage examples of angularjs$http

寻∝梦
寻∝梦Original
2018-09-08 14:54:361493browse

This article introduces in detail the built-in service $http of angularjs. What is the syntax of $http in angularjs, how to use it, and the complete code is in the article. Let’s take a look at this article now

AngularJS built-in service $http

AngularJS provides us with a lot Built-in services, Through these built-in services, you can quickly and automatically process some business function processes, such as:

$window : is used to inject the window object# in the native JS

##$document: is used to inject ## in native JS #documentDocument object

##$timeout: is used to inject encapsulation The setTimeout() function processing process in the native JS

$interval: Used to inject the setInterval()## in the encapsulated native JS #Function processing

$location: is used to inject location in native JS Object is convenient for operations such as URL

##$http：Used to inject encapsulated Ajax operations for asynchronous data requests, etc.

Today we will mainly explain $http in the built-in service of AngularJS.

##$http: $http

Service is one of the core services of

AngularJS. This service mainly encapsulates the XMLHttpRequest object and JSONPData access mode to complete data requests for remote services! Conventional syntax structure: 

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

In order to facilitate developers to process asynchronous data requests quickly, AngularJS provides a series of shortcut functions to facilitate development, mainly consisting of the following functions ：

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

In fact, the shortcut simply encapsulates the $

http service. When developing regular projects, the original one is used more The

$http({}).then(fn1, fn2) function of the built-in service $http performs asynchronous data processing. (If you want to see more, go to the PHP Chinese website AngularJS Development Manual to learn) Let’s take a simple small case to demonstrate: 

<!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>

A simple login function page.


Hope it helps everyone~

This article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to use AngularJS built-in service $http? Usage examples of angularjs$http. For more information, please follow other related articles on the PHP Chinese website!

php ajax 封装 delete JS 对象 异步 location http
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use AngularJS expressions? Detailed explanation of the use of expressions in angularjsNext article：How to use AngularJS expressions? Detailed explanation of the use of expressions in angularjs

Related articles

See more