AngularJS $http post 传递参数数据的方法


Posted in Javascript onOctober 09, 2018

在cordova开发的时候使用到了$http的post方法,传递的参数服务端怎么都接收不到,搜索了下,发现使用AngularJS通过POST传递参数还是需要设置一些东西才可以!

1、不能直接使用params

例如:

$http({    
method: "POST",    
url: "http://192.168.2.2:8080/setId",    
params: { 
cellphoneId: "b373fed6be325f7"}  
}).success();

当你这样写的时候它会把id写到url后面:

http://192.168.2.2:8080/setId?cellphoneId=b373fed6be325f7"

会在url后面添加"?cellphoneId=b373fed6be325f7",查了些资料发现params这个参数是用在GET请求中的,而POST/PUT/PATCH就需要使用data来传递;

2、直接使用data

$http({ 
   method: "POST", 
   url: "http://192.168.2.2:8080/setId", 
   data: {
 cellphoneId: "b373fed6be325f7"
} }).success();

这样的话传递的,是存在于Request Payload中,后端无法获取到参数

AngularJS $http post 传递参数数据的方法

这时发现Content-Type:application/json;charset=UTF-8,而POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,所以需要把Content-Type修改下!

3、修改Content-Type

$http({ 
   method: "POST", 
   url: "http://192.168.2.2:8080/setId", 
   data: {cellphoneId: "b373fed6be325f7"},
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 }).success();

AngularJS $http post 传递参数数据的方法

这时数据是放到了Form Data中但是发现是以对象的形式存在,所以需要进行序列化!

4、对参数进行序列化

$http({ 
   method: "POST", 
   url: "http://192.168.2.2:8080/setId", 
   data: {cellphoneId: "b373fed6be325f7"}, 
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    transformRequest: function(obj) { 
   var str = []; 
   for (var s in obj) { 
   str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s])); 
   } 
   return str.join("&"); 
  } 
 }).success();

以上这篇AngularJS $http post 传递参数数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
js验证框架实现代码分享
May 18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
js 调用百度分享功能
Feb 27 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
SVG实现时钟效果
Jul 17 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
ES6 十大特性简介
Dec 09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
Vue中的$set的使用实例代码
Oct 08 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
10 个经典PHP函数
2013/10/17 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python网络应用开发知识点浅析
2019/05/28 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
房地产还款计划书
2014/01/10 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
客服专员岗位职责
2015/02/10 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Python中super().__init__()测试以及理解
2021/12/06 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
在 Python 中利用 Pool 进行多线程
2022/04/24 Python