'+' 字符在 HttpParams angular 6 中转换为空格答案

【问题标题】：'+' character converting into space in HttpParams angular 6'+' 字符在 HttpParams angular 6 中转换为空格
【发布时间】：2019-01-27 06:56:33
【问题描述】：

我有一个 JSON 对象并使用 HttpParams 传递它，但它会将 + 转换为空间并发送到后端。我已经尝试了所有可能的方法，但没有人为 JSONObject 字符串解决它。

this.updateUser({"name":"ABC","mobile": "+911234567890","text":"1 + 2 = 3"});

public updateUser(myObj) {

    const body = new HttpParams().set('user_object', JSON.stringify(myObj));
    return this.http.post(url, body, {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
    });
  }

当我在 Network 中检查时，包含 + 字符的对象会自动转换为空格。

【问题讨论】：

尝试在您的号码周围使用引号。像“+911234567890”而不是+911234567890
这不是问题...在报价中也不起作用
你不能使用'application/json'作为内容类型吗？
由于我没有在后端处理json对象，这就是使用x-www-form-urlencoded的原因
如果您需要发送“x-www-form-urlencoded”，请尝试在此处使用“URLSearchParams”+ 不转换为空格...如果您需要更多信息，那么我会给您示例。

标签： json angular typescript encoding

【解决方案1】：

这是一个常见问题。 URL 使用+ 字符来分隔两个单词。为了在参数值中使用+ 字符，您需要先对参数值进行编码，然后再将它们添加为 URL 的一部分。 Javascript / TypeScript 为该特定目的提供了一个 encodeURI() 函数。

URL 编码将字符转换为可以传输的格式通过互联网。 [w3Schools Reference]

以下是解决此问题的方法：

let mobile = encodeURI("+911234567890");
let text = encodeURI("1 + 2 = 3");
this.updateUser({"name":"ABC","mobile": mobile,"text":text});

public updateUser(myObj) {
  const body = new HttpParams().set('user_object', JSON.stringify(myObj));
  return this.http.post(url, body, {
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
  });
}

或

您可以在 updateUser() 方法中进行编码：

this.updateUser({"name":"ABC","mobile": "+911234567890","text":"1 + 2 = 3"});

public updateUser(myObj) {
  let encodedJson = encodeURI(JSON.stringify(myObj));
  const body = new HttpParams().set('user_object', encodedJson);
  return this.http.post(url, body, {
  headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
  });
}

或

在发送到服务器之前使用正则表达式替换+：

let jsonData = JSON.stringify(myObj);
jsonData = jsonData.replace(/\+/gi, '%2B');

【讨论】：

如果我有一个很大的 json 字符串怎么办？？
那么您也可以对整个 json 字符串进行编码。检查更新。
它将编码整个 json 然后从后端我发现错误说字符串不是以“{”开头。我也应该解码到我的后端吗？或者我们可以在前端处理的任何其他方式。
您会收到错误消息，因为现在您必须在后端解码字符串！
好的，所以没有其他选项可以在前端处理？

【解决方案2】：

这是 HttpParams 的 Angular 问题。参数值中的+ 转换为。我有一个类似的问题，其中我有一个 POST 请求，它接受 Base64 编码字符串形式的文件。该文件的 Base64 转换可以包含一个 + 符号，该符号被转换为。我在我的项目中实现了一个 CustomURLEncoder 来处理相同的问题。以下是sn-p供大家参考：

import {HttpParameterCodec} from '@angular/common/http'

export class CustomURLEncoder implements HttpParameterCodec {
    encodeKey(key: string): string {
        return encodeURIComponent(key); 
    }
    encodeValue(key: string): string { 
        return encodeURIComponent(key); 
    }
    decodeKey(key: string): string { 
        return decodeURIComponent(key); 
     }
    decodeValue(key: string) {
        return decodeURIComponent(key); 
     }
}

您可以将编码器与 HttpParams 一起使用，如下所示：

import {CustomURLEncoder} from './urlencoder.component';
import {HttpParams, HttpHeaders, HttpClient} from '@angular/common/http';

export class ApiService {
    constructor(private httpClient: HttpClient){}

    base64 = "Encoded+Base64+File+Data" //String with '+'
    const fileDetails = new HttpParams({encoder: new CustomURLEncoder() })
        .set('filename','CustomEncodedFile.xlsx')
        .set('filedata',base64);

    return this.httpClient.post(url, fileDetails, {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www- 
        form-urlencoded;charset=utf-8')
    });
}

【讨论】：

我在我的应用程序中使用顶级 CustomURLEncoder 作为服务，但是当我调用 encodeValue它时不起作用。只是返回我相同的字符串值。
像魅力一样工作。尝试了许多解决方案，但除了你的以外都没有。

【解决方案3】：

不能用formData对象发送请求头数据吗？

const formData = new FormData();
formData.append("params",JSON.stringify(myObj));

【讨论】：