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宝典学习笔记(上)
Jan 10 Javascript
JQuery 入门实例1
Jun 25 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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字符串截取函数用法分析
2014/11/25 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python3中numpy函数tile的用法详解
2019/12/04 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
最新奶茶店创业计划书范文
2014/02/08 职场文书
夜不归宿检讨书
2014/02/25 职场文书
法院授权委托书范文
2014/08/02 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
骨干教师考核评语
2014/12/31 职场文书
锅炉工岗位职责
2015/02/13 职场文书
公务员处分决定书
2015/06/25 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android