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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
brook javascript框架介绍
Oct 10 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
使用js和canvas实现时钟效果
Sep 08 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
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
对Python 语音识别框架详解
2018/12/24 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python学生管理系统开发
2019/01/30 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
销售代表求职自荐信
2013/10/01 职场文书
销售文员岗位职责
2013/11/29 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
关于python类SortedList详解
2021/09/04 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript