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 append() html时的小问题的解决方法
Dec 16 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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面试题之文件目录操作
2015/10/15 PHP
PHP实现小偷程序实例
2016/10/31 PHP
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python读写LMDB文件的方法
2018/07/02 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
公司员工手册范本
2015/05/14 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
教师师德工作总结2015
2015/07/22 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python