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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
微信小程序 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
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python urls.py的三种配置写法实例详解
2017/04/28 Python
不可错过的十本Python好书
2017/07/06 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python如何读写json数据
2018/03/21 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python中字符串与编码示例代码
2019/05/20 Python
python简单区块链模拟详解
2019/07/03 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Django实现分页显示效果
2019/10/31 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书