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 相关文章推荐
基于jquery的cookie的用法
Jan 10 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 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
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
python使用mysql的两种使用方式
2018/03/07 Python
django2.0扩展用户字段示例
2019/02/13 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
学习Python爬虫的几点建议
2020/08/05 Python
python 写一个性能测试工具(一)
2020/10/24 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
师生聚会感言
2014/01/26 职场文书
项目经理聘任书
2014/03/29 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
python pygame 开发五子棋双人对弈
2022/05/02 Python