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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
js实现全选和全不选
Jul 28 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python中列表和元组的区别
2017/12/18 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python:动态路由的Flask程序代码
2019/11/22 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Python实现疫情地图可视化
2021/02/05 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
2015年公司新年寄语
2014/12/08 职场文书
三峡导游词
2015/01/31 职场文书
学校节水倡议书
2015/04/29 职场文书