新的 FormData() “application/x-www-form-urlencoded”

Question

Couchdb 仅解析 application/x-www-form-urlencoded。是否有设置 enctype 的 FormData() 属性？

 xhr.open('put',document.myForm.action,false)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(new FormData(document.myForm))

原文由 Gert Cuykens 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一种不依赖于编写自己的转换的更简单的方法：

  const form = document.getElementById('my_form')
 fetch(form.action,
       { body: new URLSearchParams(new FormData(form)) })

它使用的事实是 URLSearchParams 构造函数可以接受 FormData 对象（我认为任何会迭代值对的东西）并且 fetch 知道转换为 URLSearchParams 转换为字符串并正确设置 Content-Type 标头。

原文由 cmc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

FormData 将始终作为 multipart/form-data 发送。

如果要将 FormData 作为 x-www-form-urlencoded 发送，请对内容项进行编码：

 function urlencodeFormData(fd){
    var s = '';
    function encode(s){ return encodeURIComponent(s).replace(/%20/g,'+'); }
    for(var pair of fd.entries()){
        if(typeof pair[1]=='string'){
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

var form = document.myForm;
xhr.open('POST', form.action, false);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(urlencodeFormData(new FormData(form)));

您还可以像这样使用 URLSearchParams ：

 function urlencodeFormData(fd){
    var params = new URLSearchParams();
    for(var pair of fd.entries()){
        typeof pair[1]=='string' && params.append(pair[0], pair[1]);
    }
    return params.toString();
}

对于不支持 URLSearchParams API 的旧浏览器，您可以使用其中一种 polyfill：

• ethanius / URLSearchParams
• WebReflection / url-search-params

原文由 cuixiping 发布，翻译遵循 CC BY-SA 3.0 许可协议