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 相关文章推荐
JS远程获取网页源代码实例
Sep 05 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
全面理解闭包机制
Jul 11 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 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使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
js 处理数组重复元素示例代码
2013/12/27 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
实例介绍Python中整型
2019/02/11 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python 私有化操作实例分析
2019/11/21 Python
python实现交并比IOU教程
2020/04/16 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
类如何去实现接口
2013/12/19 面试题
大学生工作自荐书
2014/06/16 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
大学毕业生自我评价
2015/03/02 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Python time库的时间时钟处理
2021/05/02 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL