Angularjs中$http以post请求通过消息体传递参数的实现方法


Posted in Javascript onAugust 05, 2016

本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法。分享给大家供大家参考,具体如下:

Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性。

一、在声明应用的时候进行设置:

var httpPost = function($httpProvider) {
  /*******************************************
  说明:$http的post提交时,纠正消息体
  ********************************************/
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  /*
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
    for (name in obj) {
      value = obj[name];
      if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      } else if (value instanceof Object) {
        for (subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      } else if (value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }
    return query.length ? query.substr(0, query.length - 1) : query;
  };
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [
    function(data) {
      return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }
  ];
};
var ngApp = angular.module('wtApp', ['ngCookies'], httpPost);

二、调用$http post

$http({
  method: 'POST',
  url: 'GetData.ashx',
  params: { id: '1002' },//params作为url的参数
  data: { keyName: 'qubernet' }//作为消息体参数
}, function (data) {
});

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Vue实现日历小插件
Jun 26 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 #Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 #Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 #Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 #Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 #Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 #Javascript
You might like
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php写的简易聊天室代码
2011/06/04 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python实现多线程端口扫描
2019/08/31 Python
python实现最速下降法
2020/03/24 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
年终自我鉴定
2013/10/09 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
秋天的雨教学反思
2014/04/27 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2015年司法所工作总结
2015/04/27 职场文书
解析Java异步之call future
2021/06/14 Java/Android