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 相关文章推荐
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
百度地图api如何使用
Aug 03 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php include的妙用,实现路径加密
2008/07/29 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery select控制插件
2009/08/17 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
angularJS开发注意事项
2018/05/26 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
四年级下册教学反思
2014/02/01 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
学校四群教育实施方案
2014/06/12 职场文书
运动会演讲稿300字
2014/08/25 职场文书
销售合作意向书范本
2015/05/08 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python