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为了方便开发人员进行快捷的异步数据请求的处理,提供了一系列的快捷函数方便开发,主要由如下的函数:

$http.get()

$http.post()

$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)函数进行异步数据处理。






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值