如何在javascript上准备编码的POST数据？

Question

我需要通过POST方法发送数据。

例如，我有字符串“bla&bla&bla”。我尝试使用

encodeURI

并得到“bla&bla&bla”作为结果。我需要将“&”替换为本示例中正确的内容。

我应该调用什么样的方法来准备正确的POST数据？

更新：

我只需要转换可能破坏 POST 请求的字符。只有他们。

Answer 1

>>> encodeURI("bla&bla&bla")

"bla&bla&bla"

>>> encodeURIComponent("bla&bla&bla")

"bla%26bla%26bla"

Answer 2

您还可以使用

escape()

函数。

escape()

函数对字符串进行编码。 此函数使字符串可移植，因此可以通过任何网络传输到任何支持 ASCII 字符的计算机。此函数对特殊字符进行编码，但以下字符除外：

* @ - _ + . /

var queryStr = "bla&bla&bla";
alert(queryStr);               //bla&bla&bla
alert(escape(queryStr));       //bla%26bla%26bla

使用

unescape()

解码字符串。

var newQueryStr=escape(queryStr);
alert(unescape(newQueryStr));   //bla&bla&bla

注：

    escape() will not encode: @*/+

    encodeURI() will not encode: ~!@#$&*()=:/,;?+'

    encodeURIComponent() will not encode: ~!*()'

在网上搜索后，我得到以下信息：

逃逸（）

不要使用它。

encodeURI()

当您需要有效的 URL 时，请使用encodeURI。拨打此电话：

encodeURI("http://www.google.com/a file with spaces.html")

获得：

http://www.google.com/a%20file%20with%20spaces.html

不要调用encodeURIComponent，因为它会破坏URL并返回

http%3A%2F%2Fwww.google.com%2Fa%20file%20with%20spaces.html

encodeURIComponent()

当您想要对 URL 参数进行编码时，请使用encodeURIComponent。

param1 =encodeURIComponent("http://xyz.com/?a=12&b=55")

Then you may create the URL you need:

url = "http://domain.com/?param1=" + param1 + "&param2=99";

您将获得完整的网址：

http://www.domain.com/?param1=http%3A%2F%2Fxyz.com%2F%Ffa%3D12%26b%3D55¶m2=99

请注意，

encodeURIComponent

不会转义 ' 字符。一个常见的错误是使用它来创建 html 属性，例如

href='MyUrl',

，这可能会遭受注入错误。如果您要从字符串构建 html，请使用 " 而不是 ' 作为属性引号，或者添加额外的编码层（' 可以编码为 %27）。

REF:什么时候你应该使用转义而不是encodeURI/encodeURIComponent？

另外，由于 您正在使用 JQuery，请查看 this 内置函数。

Answer 3

使用encodeURIComponent()，因为encodeURI()不会编码：

~!@#$&*()=:/,;?+'

以下链接已对此进行了很好的解释：

http://xkr.us/articles/javascript/encode-compare/

Answer 4

最近的 URLSearchParams DOM API（以及通过 URL，可能还有其他）在某些情况下处理编码。例如，创建或使用现有的 URL 对象（例如来自锚标记）我将对象的条目映射为 URL 编码参数的键值对（用于 application/x-www-form-urlencoded 中的 GET/POST/etc）模仿类型）。请注意表情符号、与号和双引号的编码方式，无需任何特殊处理（从 Chrome devtools 控制台复制）：

var url = new URL(location.pathname, location.origin);
    Object.entries({a:1,b:"🍻",c:'"stuff&things"'}).forEach(url.searchParams.set, url.searchParams);
    url.search;
    "?a=1&b=%F0%9F%8D%BB&c=%22stuff%26things%22"

fetch(url.pathname, {
    method: 'POST',
    headers: new Headers({
        "Content-type": "application/x-www-form-urlencoded"
    }),
    // same format as GET url search params a&b&c
    body: url.searchParams
}).then((res)=>{ console.log(res); return res }).catch((res)=>{ console.warn(res); return res; });

Answer 5

我想发布 javascript 创建的隐藏表单。

所以问题是是否应该在每个 POST 变量上使用 encodeURIComponent()。

我在这个帖子中没有找到德米特里（和我的）问题的答案。 但我已经在这个帖子中找到了答案。 如果您有上传字段的表单/POST，则必须使用

<form enctype="multipart/form-data">

，如果没有使用上传字段，您应该按照

此处描述

选择自己。 提交表单应该可以完成工作，因此无需明确使用 encodeURIComponent()。如果您在不使用表单或没有某些从数据创建 Http POST 的库的情况下创建 Http POST，那么您需要选择 enctype= 并自行加入数据。

这对于

application/x-www-form-urlencoded

来说很容易，您将在每个值上使用

encodeURIComponent()

并完全按照 GET 请求那样将它们连接起来。如果您决定使用

multipart/form-data

那么..？

在这种情况下，您应该更多地搜索如何编码和加入它们

。

Answer 6

URLSearchParams[1]

类（

Docs

）。 它在构造函数中接受 Object 参数。 然后，您可以在实例上调用

.toString()

来获取实际参数，使用

encodeURIComponent()

 进行编码

然后，在实际请求中，需要指定

Content-Type

标头为

application/x-www-form-urlencoded

，只需将请求的

body

属性设置为

String

方法返回的

params.toString()

即可。

const data = {"hello[World}": `🥑`, "goodbye": `😞`};
const params = new URLSearchParams(data);

const endpoint = `https://example.com`;

fetch(endpoint, {
  method: `POST`,
  headers: {
    "Content-Type": `application/x-www-form-urlencoded`,
  },
  body: params.toString(), // hello%5BWorld%7D=%F0%9F%A5%91&goodbye=%F0%9F%98%9E
});