javascript - 如何在 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: ~!*()'

在互联网上进行了一些搜索后，我得到了以下信息：

逃脱（）

不要使用它。

编码URI()

如果您想要一个工作 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

编码URIComponent()

如果要对 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";

你会得到这个完整的 URL：

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

Note that encodeURIComponent does not escape the ' character. A common bug is to use it to create html attributes such as href='MyUrl', which could suffer an injection bug. If you are constructing html from strings, either use " instead of ' for attribute quotes, or add an extra layer of encoding (' can be encoded as %27).

REF:When are you supposed to use escape instead of encodeURI / encodeURIComponent?

Also, as you are using JQuery, take a look at this built-in function.

Answer 3

使用 encodeURIComponent() 因为 encodeURI() 不会编码：~!@#$&*()=:/,;?+'

这已在以下链接中得到很好的解释：

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

Answer 4

More recent DOM APIs for URLSearchParams (and via URL, possibly others too) handle encoding in some cases. For example, create or use an existing URL object (like from an anchor tag) I map entries of an object as key value pairs for URL encoded params (to use for GET/POST/etc in application/x-www-form-urlencoded mimetype). Note how the emoji, ampersand and double quotes are encoded without any special handling (copied from the Chrome devtools console):

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

I want POST the javascript-created hidden form.

So the question is if encodeURIComponent() should be used on each POST variable.

I haven't found the answer for Dmitry's (and my) question in this thread. But I have found the answer in this thread.

In case of form/POST where you have upload field(s) you must use <form enctype="multipart/form-data">, if no upload field is used, you should choose yourself as described here. Submitting the form should do the job completly, so there is no need to use encodeURIComponent() explicitly.

If you create a Http POST without using a form or without some library which creates a Http POST from your data, then you need choose an enctype= and join data yourselves.

This will be easy for application/x-www-form-urlencoded, where you will use encodeURIComponent() on each value and join them exactly as for GET request.

If you decide use multipart/form-data then ....? You should google more how to encode and join them in such case.