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 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
Javascript实现的分页函数
2007/02/07 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
浅谈Python 对象内存占用
2016/07/15 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python在协程中增加任务实例操作
2021/02/28 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
工程总经理工作职责
2013/12/09 职场文书
四风问题对照检查材料
2014/09/22 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL