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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
微信小程序实现传递多个参数与事件处理
Aug 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
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python正则表达式使用范例分享
2016/12/04 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
股权收购意向书
2014/04/01 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
辞职信怎么写?
2019/05/21 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS