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匿名函数的一种应用 代码封装
Jun 27 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
JS实现可视化文件上传
Sep 08 Javascript
Element Dialog对话框的使用示例
Jul 26 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自动生成月历代码
2006/10/09 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
python实现发送邮件功能代码
2017/12/14 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python绘制规则网络图形实例
2019/12/09 Python
python实现IOU计算案例
2020/04/12 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
教师年终个人自我评价
2013/10/04 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2015年服务员工作总结
2015/04/08 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Golang 遍历二叉树
2022/04/19 Golang