Angular 7 HTTP GET将JSON对象作为参数发送

Question

我试图从角度做这样的事情发送一个json结构到休息服务

  let test5var = {
                    "test5var1": {
                        "test5var2": "0317",
                        "test5var3": "9556"
                    },
                    "test5var4": "123",
                    "test5var": "0000046"
                }
let dataPrincipalBlnc = {"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}};

let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    let params = new HttpParams().set("requestData", dataPrincipalBlnc.toString()).set("authenticationType", this.authType);


    return this.http.get(this.url, {params: params}); 

请求的结果应如下所示：

https://example.com/test?authenticationType=cookie&requestData=%7B%test%22:%7B%22test1%22:%7B%22test2%22:%220317%22,%22test3%22:%7B%22IDIOMA_ISO%22:%22+en%22,%22DIALECTO_ISO%22:%22US%22%7D,%22channel%22:%22INT%22%7D,%22input%22:%7B%22test5%22:%7B%22test5var1%22:%7B%22test5var2%22:%220317%22,%22test5var3%22:%229556%22%7D,%22test5var4%22:%22123%22,%22test5var5%22:%220000986%22%7D%7D%7D%7D

但它目前发送为：

https://example.com/test?requestData=%5Bobject%20Object%5D&authenticationType=cookie

任何想法如何将json对象作为第一个请求发送？我是否需要手动将json转换为有效的uri格式？

在angularJS只使用以下代码工作正常：

var data = {
      "test1": {
        "test2": {
          "test3": "0317",
          "test4": {
            "IDIOMA_ISO": " en",
            "DIALECTO_ISO": "US"
          },
          "channel": "INT"
        },
        "input": {
          "test5": test5var
        }
      }
};
$http.get(url, {
      params: {
        authenticationType: authType,
        requestData: data
      }
    }).then(success(deferred), error(deferred));

我也尝试使用以下代码，但结果是添加更多字符，后端是令人费解的，因为它说JSON不是有效的格式：

encodeURIComponent(JSON.stringify(dataPrincipalBlnc)

？的RequestData =％257B％2522test％2522％253A％257B％2522test1％2522％253A％257B％2522test2％2522％253A％25220317％2522％252℃％2522test3％2522％253A％257B％2522IDIOMA_ISO％2522％253A％2522％ 2520en％2522％252℃％2522DIALECTO_ISO％2522％253A％2522US％2522％257D％252C％2522channel％2522％253A％2522INT％2522％257D％252C％2522input％2522％253A％257B％2522test5％2522％253A％257B％ 2522test5var1％2522％253A％257B％2522test5var2％2522％253A％25220317％2522％252℃％2522test5var4％2522％253A％25229556％2522％257D％252C％2522test5var4％2522％253A％2522123％2522％252℃％2522test5var5％2522％ 253A％25220003303％2522％257D％257D％257D％257D＆authenticationType =饼干

感谢和问候

Answer 1

传递给服务的任何JSON对象都应该通过响应主体发送。您应该只在URL中添加有效的字符串参数。

此外，大多数浏览器都有url size limitation，因此更大的对象可能会导致长网址问题。

您正在查看requestData=%5Bobject%20Object%5D&authenticationType=cookie，因为它无法将JSON对象放入url查询字符串中。

某些字符不能是URL的一部分（例如，空格），而其他一些字符在URL中具有特殊含义：例如，字符＃可用于进一步指定文档的子部分（或片段）; character =用于将名称与值分开。可能需要转换查询字符串以满足这些约束。这可以使用称为URL编码的模式来完成。

如果您有JavaScript对象并且想要将其转换为字符串（包含JSON文本），请使用JSON.stringify。这称为序列化。

无论JSON如何：

每当你想在URL中发送“有问题”字符时使用encodeURIComponent，例如＆，％等。相反的是decodeURIComponent。

我仍然希望在请求正文中发送对象。

所以在你的情况下使用：

 let params = new HttpParams()
.set("requestData", encodeURIComponent(JSON.stringify(dataPrincipalBlnc)))
.set("authenticationType", this.authType);

Answer 2

添加到@nircraft答案（这是非常精细和好的）这个实现似乎对你有用，

let test5var = {
                "test5var1": {
                    "test5var2": "0317",
                    "test5var3": "9556"
                },
                "test5var4": "123",
                "test5var": "0000046"
            }
let dataPrincipalBlnc = '{"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}}';

let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');

let params = new HttpParams().set("requestData", encodeURIComponent(dataPrincipalBlnc)).set("authenticationType", this.authType);


return this.http.get(this.url, {params: params}); 

在Javascript中，您基本上可以在''或""中包含一个字符串。

当你没有特别附上字符串时我相信它被""括起来，因此当你使用stringify时，你的JSON响应需要转义字符。

像这样包含字符串将确保双引号将确保它不需要转义字符。

如果您有任何疑问，请告诉我。

Answer 3

我只是通过将数据定义为对象并仅使用JSON.stringify来解决问题：

let dataPrincipalBlnc: object;

let dataPrincipalBlnc = {"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}};

let params = new HttpParams().set("requestData", JSON.stringify(dataPrincipalBlnc)).set("authenticationType", this.authType);

谢谢你的帮助