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下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
详解基于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
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
证券期货行业个人的自我评价
2013/12/26 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
公立医院改革实施方案
2014/03/14 职场文书
环境整治工作方案
2014/05/18 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
校本培训个人总结
2015/02/28 职场文书
培训班通知
2015/04/25 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript