angular中的post请求处理示例详解


Posted in Javascript onJune 30, 2020

前言

项目angular中使用jQuery请求,想替换为angular自身请求,结果发现后台没法获取?⑹???裕?檠?柿戏治鲆幌拢?龈鲎芙帷?/p>

步骤如下:

首先,angular和jQuery中请求是不同的。如下:

  • jQuery:

请求contentType是:

application/x-www-form-urlencoded; charset=UTF-8

该类型数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值. 非字母或数字的字符会被百分比编码: 这也就是为什么这种类型不支持二进制数据(应使用 multipart/form-data 代替)。

data参数是处理过的:

// json对象
{ a : 3, b : 2 }
// 将json对象处理为
"a=3&b=2"
  • Angular:

请求contentType:

application/json

data参数:

// json对象
{a: 3,c: 2}

综上来看,angular提交后台是json,不是表单数据。我们需要把json对象转换为参数拼接,提交后台时就是表单数据了:

/**
  * 将application/json转换为application/x-www-form-urlencoded
  * @param data
  */
 handlerPostParams(data) {
  const params = [];
  for (const key in data) {
   if (data[key] && !isNull(data[key])) {
    if (data[key] instanceof Array) {
     for (let i = 0; i < data[key].length; i++) {
      if (data[key][i] && !isNull(data[key][i])) {
       const value = data[key][i];
       const name = key + '[' + i + ']';
       const innerObj = {};
       innerObj[name] = value;
       params.push(this.handlerPostParams(innerObj));
      }
     }
    } else if (data[key] instanceof Object) {
     for (const k in data[key]) {
      if (data[key][k] && !isNull(data[key][k])) {
       const value = data[key][k];
       const name = key + '[' + k + ']';
       const innerObj = {};
       innerObj[name] = value;
       params.push(this.handlerPostParams(innerObj));
      }
     }
    } else {
     const param = encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
     params.push(param);
    }
   }
  }
  return params.join('&');
 }

总结

到此这篇关于angular中post请求处理的文章就介绍到这了,更多相关angular post请求处理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
vue开发简单上传图片功能
Jun 30 #Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
vue实现整屏滚动切换
Jun 29 #Javascript
vue实现页面切换滑动效果
Jun 29 #Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
如何在PHP中生成随机数
2020/06/04 PHP
一个javascript参数的小问题
2008/03/02 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python实现猜数游戏
2020/03/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
基于python实现地址和经纬度转换
2020/05/19 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
九年级物理教学反思
2014/01/29 职场文书
更夫岗位责任制
2014/02/11 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python