angularJS 发起$http.post和$http.get请求的实现方法


Posted in Javascript onMay 18, 2017

AngularJS发起$http.post请求

代码如下:

$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:1,age:20} 
}).success(function(req){ 
  console.log(req); 
})

这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data。

解决方案:

配置$httpProvider:

var myApp = angular.module('app',[]); 
 myApp.config(function($httpProvider){ 

  $httpProvider.defaults.transformRequest = function(obj){ 
   var str = []; 
   for(var p in obj){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
   } 
   return str.join("&"); 
  } 

  $httpProvider.defaults.headers.post = { 
    'Content-Type': 'application/x-www-form-urlencoded' 
  } 

});

或者在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("&"); 
  } 
}).success(function(req){ 
    console.log(req); 
})

AngularJS发起$http.post请求

代码如下:

app.controller('sprintCtrl', function($scope, $http) {
      $http.get("http://localhost:8080/aosapp/pt/service?formid=pt_aosapp_service_sprintlist&teamid=1")
      .success(function (response) {console.log($scope.sprintlist=response);});
    });

其实,angularjs 和 jquery js最大的区别在哪儿那,angularjs是你事先在心中构建好真个页面,然后用变量或者占位符来表示数据,数据来了,直接填充就可以了;而jquery则是动态的修改dom元素,如添加修改dom标签等。设计思想不一样。

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

Javascript 相关文章推荐
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
关于js遍历表格的实例
Jul 10 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 #Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
You might like
PHP7新增运算符用法实例分析
2016/09/26 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
详解Python打包分发工具setuptools
2019/08/05 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
小学生毕业评语
2014/12/26 职场文书
中学生学习保证书
2015/02/26 职场文书
起诉书格式范文
2015/05/20 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL