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 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
详解JavaScript函数对象
Nov 15 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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 文章调用类代码
2011/08/11 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
用Python实现职工信息管理系统
2020/12/30 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
采购文员岗位职责
2013/11/20 职场文书
公务员培训心得体会
2013/12/28 职场文书
超市5.1促销活动
2014/01/15 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
python turtle绘图
2022/05/04 Python