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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
原生js实现表格循环滚动
Nov 24 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python中创建二维数组
2018/10/17 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python按照多个条件排序的方法
2019/02/08 Python
python不同系统中打开方法
2020/06/23 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
公司薪酬管理制度
2014/01/31 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
行风评议整改报告
2014/11/06 职场文书
捐助倡议书
2015/01/19 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript