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 相关文章推荐
document.all与WEB标准
May 13 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
javascript获取元素的计算样式
May 24 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/23 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP 实现链式操作
2021/03/09 PHP
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Django Rest framework之认证的实现代码
2018/12/17 Python
Python3模拟登录操作实例分析
2019/03/12 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
希特勒的演讲稿
2014/05/23 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android