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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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
APMServ使用说明
2006/10/23 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python简单文本处理的方法
2015/07/10 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
微信小程序调用python模型
2022/04/21 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python