Angular的$http与$location


Posted in Javascript onDecember 26, 2016

$http

但是对于一个web应用,angular是如何同服务端进行交互获得数据的呢?

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http',function($scope,$http){
    $http({
      method : 'GET',
      url : 'http/data.php',
    }).success(function(data,state,headers,config){
      console.log(data,state,headers(),config);
    }).error(function(data){
      console.log(data);
    });
  }]);
</script>

用过JQ的同学一看就知道了,我们重点看看success回调的参数。(别忘了我们需要controller上引入http的模块)

data:後端返回给我们的数据。

state:http状态码

headers:http头信息

config:ajax的配置信息 

我们还可以更简单的来使用get和post。

//get
$http.get('http/data.php').success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

//post
$http.post('http/data.php',{
  name : 'xiecg',
  age : 18
}).success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

 上面都很简单。

下面我们来看看如何用angular来实现跨域(百度搜索关键词补全)。

<div ng-controller="Aaa">
  <input type="text" ng-model="name" ng-keyup="change(name)">
  <input type="button" ng-click="change(name)" value="搜索">
  <ul>
    <li ng-repeat="d in data">{{d}}</li>
  </ul>
</div>

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
    var timer = null;
    $scope.data = [];
    $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
        $http({
          method : 'JSONP',
          url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
        }).success(function(data,state,headers,config){
          console.log(data);
          $scope.data = data.s;
        }).error(function(data){
          console.log(data);
        });
      },500);
    };
  }]);
</script>

我们分别添加了两个事件ng-keyup以及ng-click来传入用户需要搜索的关键词,为了考虑性能我们使用定时器延迟500毫秒执行change方法。

Angular的$http与$location

$location

<script type="text/javascript">

  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$location',function($scope,$location){
    var absUrl = $location.absUrl();  //URL地址
    
    //$location.path('aaa').replace();  //禁止历史管理
    var path = $location.path();    //文件路径,路由
    
    //$location.hash('hello');      //设置哈希值
    //$location.search({'age' : '19'});  //设置数据
    var hash = $location.hash();

    var url = $location.url();      //数据

    var host = $location.host();    //主机名

    var port = $location.port();    //端口号

    var protocol = $location.protocol();//协议

    console.log(protocol);

  }]);

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP header函数分析详解
2011/08/06 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
浅谈js原生拖放
2016/11/21 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
如何利用find命令查找文件
2016/11/18 面试题
公司聘任书模板
2014/03/29 职场文书
外联部演讲稿
2014/05/24 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
坎儿井导游词
2015/02/09 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
如何在Python中创建二叉树
2021/03/30 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers