项目技术：Angular 6

问题现象：接口传参的时候，使用 httpClient.post 方法提交数据，字段中包含+号被解析成空格，提交数据错误

解决过程：

1、http请求中包含+号，会被自动解析成空格，必须将加号替换成 '%2B'，则数据提交正常，如下测试代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

  <input type="text" id="createResult" />

  <input type="text" id="staffName" />

  <input type="text" id="staffNumber" />

  <input type="text" id="staffSex" />

  <input type="text" id="staffJob" />

  <input type="button" id="btnSave" onclick="btn()"  value="发送请求"/>

  <script>

    function createXHR() {

      if (typeof XMLHttpRequest != "undefined") {

        return new XMLHttpRequest();

      } else if (typeof ActiveXObject != "undefined") {

        if (typeof arguments.callee.activeString != "string") {

          var versions = ["MSXML2.XMLHTTP6.0", "MSXML2.XMLHTTP3.0", "MSXML2.XMLHTTP"], i, len;

          for (i = 0; len = versions.lengthli < len; i++) {

            try {

              new ActiveXObject(versions[i]);

              arguments.callee.activeString = versions[i];

              break;

            } catch (ex) {

              //跳过

            }

          }

        }

        return new ActiveXObject(arguments.callee.activeString);

      } else {

        throw new Error("无可用XHR");

      }

    }

    function btn() {

      var createResult = document.getElementById("createResult");

      var data = "name=" + document.getElementById("staffName").value.replace(/\+/g, "%2B")

        + "&number=" + document.getElementById("staffNumber").value.replace(/\+/g, "%2B")

        + "&sex=" + document.getElementById("staffSex").value.replace(/\+/g, "%2B")

        + "&job=" + document.getElementById("staffJob").value.replace(/\+/g, "%2B");

      var request = createXHR();

      request.onreadystatechange = function () {

        if (request.readyState === 4) {

          if (request.status === 200) {

            createResult.innerHTML = request.responseText;

          } else {

            alert("发生错误" + request.status);

          }

        }

      };

      request.open("POST", "http://kjss.kuaijisishu.cn/expense.html?list&isArrearage1=&handleUserId=&field=id,stuNo,stuName,telphone,planclassesName,shouldPayFee,havePayFee,discountFee,returnFee,remainPayFee,lastPayDate,buildDate,returnState,handleUserName,licenseCode,domain,orgName,", false);

      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      request.send(data);

    }

  </script>

</body>

</html>

2、在angularjs提交时，将+号replace成%2b，但提交的数据仍然是空格

所以，调试angular源码，发现,HttpUrlEncodingCodec 中包含这么段代码，将数据又解析回去：

  encodeKey(k: string): string {

        return this.encode(k);

    }

    encodeValue(v: string): string {

        return this.encode(v);

    }

    private encode(v: string): string {

        return encodeURIComponent(v)

        .replace(/%40/gi, '@')

        .replace(/%3A/gi, ':')

        .replace(/%24/gi, '$')

        .replace(/%2C/gi, ',')

        .replace(/%3B/gi, ';')

        .replace(/%2B/gi, '+')

        .replace(/%3D/gi, ';')

        .replace(/%3F/gi, '?')

        .replace(/%2F/gi, '/');

  }

3、到angular的github的 issue中找，果然发现有很多人有同样的问题，其中有包含解决方案。

参考资料：https://github.com/angular/angular/issues/11058

解决方案：重写Angular的参数编码方式（HttpUrlEncodingCodec ）

//解决http请求+号显示空格问题

class GhQueryEncoder extends HttpUrlEncodingCodec {

  encodeKey(k: string): string {

    k = super.encodeKey(k);

    return this.replaceCharacter(k);

  }

  encodeValue(v: string): string {

    v = super.encodeKey(v);

    return this.replaceCharacter(v);

  }

  replaceCharacter(v) {

    return v.replace(/\+/gi, '%2B');

  }

}

【HTTP】http请求url参数包含+号，被解析为空格的更多相关文章

  1. 使用Typescript重构axios(三)——实现基础功能：处理get请求url参数

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  2. 【2019】问题记录一：后端获取URL参数的值内加号“+”变成空格“ ”

    问题:URL参数中加号“+”变成空格“ ” 一.现象     URL如:http://example.****.com/controller/action?param=rice+cook+panda ...

  3. get请求url参数中有+、空格、=、%、&、#等特殊符号的问题解决

    url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好?解决办法将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义 用其它 ...

  4. Loadrunner加密算法脚本与token作为get请求url上的参数处理

    1.当字符串被封装好加密时(下例将算法封装在md5中),使用Loadrunner编写脚本,需要进行如下操作:       1)将md5.h文件添加到Extra Files 下,如图(Loadrunne ...

  5. 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  6. Objective-C中把URL请求的参数转换为字典

    上一篇博客中是把URL转换为字典,那么我们如何把URL请求中的参数封装成字典,然后再封装成数组呢?对OC中字符串操作熟练的小伙伴们应该觉得这是一个a+b的问题,没错把URL中的参数转换为字典主要是对字 ...

  7. 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用

    结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂) 简述项目流程: 1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该 ...

  8. 加号变空格问题 url参数 post get 请求发送

    问题:加号后台接收变空格问题 结论: 1.任何get拼接的请求 参数key value 需要编码后在拼接 2.get请求避免做数据提交,用post提交.jq,axios的post提交默认编码了不会有问 ...

  9. Java_得到GET和POST请求URL和参数列表

    一. 获取URL: getRequestURL()(还有个getRequestURI(),只取后面部分) 二. 获取参数列表: 1.getQueryString() 只适用于GET,比如客户端发送ht ...

随机推荐

  1. [Linux] 023 RPM 包校验与文件提取

    1. RPM 包校验 $ rpm -V 已安装的包名 选项 释义 -V (verify) 校验指定 RPM 包中的文件 (1) 验证内容中的 8 个信息的具体内容如下 信息名称 释义 S 文件大小是否 ...

  2. HNOI2019fish

    \({\rm fish}\) 20分: 六个for,点积判锐角钝角. #include <vector> #include <queue> #include <cmath ...

  3. Topcoder SRM652div2

    开始接触Topcode..div2.. 250题目: Problem Statement      You are given a String s consisting of lower to , ...

  4. codeforces hack

    对某一题,首先你自己要先过TEST. 然后回到比赛的PROBLEM列表,把这题后面的锁锁上(锁上了就不能再提交了,所以没把握就别锁了), 然后到ROOM里面,你就可以看别人代码了,下面有HACK按钮, ...

  5. Java 8实战之读书笔记四：高效Java 8编程

    三.高效Java 8编程 第8章 重构.测试和调试 Java 8的新特性也可以帮助提升代码的可读性:      使用Java 8,你可以减少冗长的代码,让代码更易于理解      通过方法引用和S ...

  6. 通用的规则匹配算法(原创)(java+.net)

    1.java里可以使用Spring的 Spel或者Google的Aviator 如果使用 Aviator 则添加以下依赖 <dependency> <groupId>com.g ...

  7. worldcloud库的使用

    worldcloud库的使用 worldcloud是一个优秀的第三方词云展示库,用来实现比较有逼格的数据可视化效果.更加直观与艺术的展示单词. worldcloud对象的创建 worldcloud.W ...

  8. rmdir －删除空目录

    总览 rmdir[options]directory... POSIX 选项: [-p] GNU 选项(缩写): [-p] [--ignore-fail-on-non-empty] [--help] ...

  9. 164-基于TI DSP TMS320C6455和Altera FPGA EP2S130的Full CameraLink PDS150接口板卡

    一.板卡概述 本板卡由我公司自主研发,板卡采用DSP+FPGA的结构,DSP使用TMS320C6455芯片,FPGA采用ALTERA的高端FPGA芯片Stratix II EP2S系列EP2S130, ...

  10. Shell05--函数应用

    目录 Shell05---函数应用 1. 函数基本概述 2. 函数基本使用 3. 函数参数传递 4. 函数状态返回 5. 函数场景示例 Shell05---函数应用 1. 函数基本概述 01. 什么是 ...