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 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解webpack 热更新优化
Sep 13 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python多线程同步实例教程
2019/08/11 Python
pytest中文文档之编写断言
2019/09/12 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python排序函数的使用方法详解
2020/12/11 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
铁路个人事迹材料
2014/01/30 职场文书
《搭石》教学反思
2014/04/07 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
民政工作个人总结
2015/02/28 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL