Javascript 如何使用AngularJS正确发送包含逗号的URL参数？

我有一种感觉，我只是看错了这一点，但我想获得关于如何通过Angular的$http.get（）方法传递URL查询参数的正确方法的反馈，特别是包含逗号的参数

假设我有以下数据，用作GET请求中的URL参数：

var params = {
  filter : [
     "My filter",
     "My other filter",
     "A filter, that contains, some commas"
  ],
  sort : [
     "ascending"
  ]
};

现在，我将此结构转换为一些参数，这些参数可以输入到

$http.get

：

var urlParams = {};
angular.forEach(params, function(value, name) {
    urlParams[name] = "";
    for (var i = 0; i < value.length; i++) {
       urlParams[name] += value[i];
       if (i < value.length - 1) {
         urlParams[name] += ","
       }
    }
}

现在，这不是我想要的，因为第三个

filter

参数现在变成了三个独立的参数。（我使用的API不允许以任何其他方式传递参数的多个值，除了：“？param=value1，value2，value3”）因此，我需要做的是首先对这些值进行URI编码，对吗？因此，我向上述例程添加了一个

encodeURIComponent（）

，如下所示：

{
  filter : "My filter,My other filter,A filter, that contains, some commas",
  sort : "ascending"
}

urlParams[name] += encodeURIComponent(value[i]);

{
  filter : "My%20filter,My%20other%20filter,A%20filter%2C%20that%20contains%2C%20some%20commas",
  sort : "ascending"
}

GET "/foo?filter=My%2520filter,My%2520other%2520filter,A%2520filter%2C%20that%20contains%2C%20some%20commas&sort=ascending"

这为我提供了一个形参对象，如下所示：

{
  filter : "My filter,My other filter,A filter, that contains, some commas",
  sort : "ascending"
}

urlParams[name] += encodeURIComponent(value[i]);

{
  filter : "My%20filter,My%20other%20filter,A%20filter%2C%20that%20contains%2C%20some%20commas",
  sort : "ascending"
}

GET "/foo?filter=My%2520filter,My%2520other%2520filter,A%2520filter%2C%20that%20contains%2C%20some%20commas&sort=ascending"

现在，我提出一个要求：

var config = {
  params : urlParams
};
$http.get("/foo", config).then(function(response){
  console.log(response);
});

。。。这不起作用，因为Angular也对URL参数进行编码，所以请求的结果如下所示：

{
  filter : "My filter,My other filter,A filter, that contains, some commas",
  sort : "ascending"
}

urlParams[name] += encodeURIComponent(value[i]);

{
  filter : "My%20filter,My%20other%20filter,A%20filter%2C%20that%20contains%2C%20some%20commas",
  sort : "ascending"
}

GET "/foo?filter=My%2520filter,My%2520other%2520filter,A%2520filter%2C%20that%20contains%2C%20some%20commas&sort=ascending"

正如您所看到的，参数被编码了两次（%符号被编码为%25），这当然不起作用

显然，我做错了。但正确的方法是什么？或者，我需要让API开发人员接受这样的URL参数吗

GET "/foo?filter=My+filter,+with+a+comma&filter=Another+filter"

---

如果多个参数值是单独声明的，而不是逗号分隔的？

我认为您不应该使用逗号作为数组的分隔符

我建议你

• 使用POST发送json数据（需要更改API）

或者使用另一个字符串作为分隔符。例如，

@@@

仅供参考，您可以像这样简单地将数组连接到字符串中

array.join（'，'）

来自$http docs

如果您希望仅覆盖单个请求的请求/响应转换，则在传递到$http的配置对象上提供transformRequest和/或transformResponse属性

请注意，如果在config对象上提供这些属性，则默认转换将被覆盖。如果希望增加默认转换，则必须将它们包括在本地转换数组中

简而言之，您可以使用

encodeURIComponent（）

功能替换默认值，方法是在每个请求的配置对象中包含

transformRequest

属性，或者您可以建立全局覆盖

有关详细信息，请参阅中的“转换请求和响应”

---

首先不确定为什么要将其作为GET发送

正如您描述的API一样，无法可靠地传递包含逗号的值

假设您希望将项目作为列表传递

• 如果按原样传递字符串，API将看到（在正常的服务器端URL解码之后）
  这使得

  3,4

  与两个单独的项目无法区分

• 如果传递URL编码的字符串，整个参数将被双重编码，API将看到（同样，在URL解码后）
  现在参数是可区分的，但这需要API支持分别对每个项目进行URL解码

• 假设您传递字符串，如

  one，two，“three，four”

  ，即包含逗号的项目被引用。API可以正确解码参数，但它需要支持更复杂的语法（带引号的字符串），而不是简单地用逗号分割

……等等。底线是，如果没有API的额外支持，我认为客户端无法欺骗它正确解码包含逗号的字符串。API开发人员可以进行许多调整，例如

接受列表项中逗号的转义序列，该列表项是未转义的服务器端

接受单独URL参数中的每个项目

通过

POST

接受JSON编码的正文

---

您需要让API开发人员做一些事情。

谢谢-这可能就是解决问题的方法。这是一个GET请求，因为它正在从RESTAPI后面的资源检索数据。实际上，我认为我需要做的是利用配置上的

paramSerializer

选项。然后，我可以在angular完成自己的序列化之后对查询值进行序列化：在我的问题中，可能不清楚为什么这是GET而不是POST。请求是从RESTful API后面的资源中检索数据。这些参数告诉API如何过滤和排序这些数据。因此，使用POST感觉不太合适。谢谢你提醒我使用

加入
——我需要改掉的一个老习惯：）谢谢你帮我想清楚。如果有一个最好的答案，我想一定是这个，因为这就是我最终要求的——API开发人员做出一些调整。