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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
js验证是否为数字的总结
Apr 14 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
antd form表单数据回显操作
Nov 02 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数字游戏 计算24算法
2012/06/10 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书