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 相关文章推荐
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
详解小程序开发经验:多页面数据同步
May 18 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
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
统计系教授推荐信
2014/02/28 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
爱心助学感谢信
2015/01/21 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
python中tkinter复选框使用操作
2021/11/11 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android