AngularJS中$http的交互问题


Posted in Javascript onMarch 29, 2017

这篇文章,主要是通过我们熟悉的jquery中ajax和jsonp的类型方式,总结一下$http的使用。

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

1. angular中的ajax

写法一:

$http({
  method: 'GET', //可以改成POST
  url: '/someUrl'
}).then(function successCallback(response) {
    // 请求成功执行代码
  }, function errorCallback(response) {
    // 请求失败执行代码
});

示例:

var app = angular.module('myApp', []);  
app.controller('siteCtrl', function($scope, $http) {
  $http({
    method: 'GET',
    url: 'https://www.runoob.com/try/angularjs/data/sites.php',

  }).then(function successCallback(response) {
      console.log(response.data);
    }, function errorCallback(response) {
      console.log('失败');
  });
});

写法二:

①GET请求

$http.get('/someUrl',config).then(successCallback, errorCallback); 
$http.get('/someUrl',{params:{}}).then(successCallback, errorCallback);

示例:

$http.get({
  'http://10.30.24.12/emp-management/empDetail',
  {params:{"id":3}}
}).then(function successCallback(response) {
    console.log(response.data.name);
  }, function errorCallback(response) {
    console.log('失败');
});

②POST请求

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

示例:

$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:"1",age:"20"} 
}).then(function successCallback(response) {
    console.log(response);
  }, function errorCallback(response) {
    console.log('失败');
});

//但是,这时候你可能收不到返回的数据,结果为null,这是因为要转换成form data。 
//解决方案(在post中进行相应配置):
$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:"1",age:"20"}, 
  headers:{'Content-Type': 'application/x-www-form-urlencoded'}, 
  transformRequest: function(obj) { 
   var str = []; 
   for(var p in obj){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
   } 
   return str.join("&"); 
  } 
}).then(function successCallback(response) {
    console.log(response);
  }, function errorCallback(response) {
    console.log('失败');
});

/*
原理解读:
首先,配置headers是因为,POST提交时,使用的Content-Type是application/x-www-form-urlencoded,
而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8,
在html中form的Content-type默认值是Content-type:application/x-www-form-urlencoded,所以要进行相应的配置。
然后,配置transformRequest是因为,如果参数是对象,需要转化一下。
*/

2.angular中的jsonp

$http({method:'JSONP',url:''}).success().error();
$http.jsonp('/someUrl').success().error();

//这里要注意,跨域请求的url后一定要追加参数callback,并且callback的值是固定的,即JSON_CALLBACK,尽量不要去做任何改动

示例:

$http({ 
  method: 'JSONP', 
  url: 'http://www.b.com/test.php?callback=JSON_CALLBACK' 
}).success(function(response){ 
  console.log(response); 
}); 

$http.jsonp(
  'http://www.b.com/test.php?callback=JSON_CALLBACK'
).success(function (response){ 
  console.log(response); 
});

3.最后,总结一下注意事项:

(1)代码里使用的.then()也可以写成.success().error(),但是v1.5中 $http 的 success 和 error 方法已废弃,使用 then 方法替代;

(2)关于参数:用GET的时候就是params,用POST/PUT/PATCH/DELETE就是data;

(3)$http.jsonp跨域请求的url后一定要追加参数callback,并且callback的值是固定的,即JSON_CALLBACK,尽量不要去做任何改动。

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

Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
JavaScript 学习技巧
Feb 17 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
vue实现底部菜单功能
Jul 24 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
Angular2开发——组件规划篇
Mar 28 #Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 #Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 #Javascript
JavaScript实现分页效果
Mar 28 #Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 #Javascript
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的闭包总结
2014/09/18 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
教职工代表大会主持词
2014/04/01 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
会计师事务所实习证明
2014/11/16 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
七年级作文之雪景
2019/11/18 职场文书