CouchDB 新的FormData()“应用程序/x-www-表单-网址编码”

k0pti3hp  于 2022-12-09  发布在  CouchDB
关注(0)|答案(4)|浏览(110)

Couchdb只解析application/x-www-form-urlencoded。是否存在设置加密类型的FormData()属性?

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

2j4z5cfb1#

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的旧版浏览器,您可以使用以下多边形填充之一:

lndjwyie

lndjwyie2#

下面是一个更简单的方法,它不依赖于编写自己的转换:

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

它利用了URLSearchParams构造函数可以接受FormData对象(我认为是任何可以迭代值对的对象),以及fetch知道将URLSearchParams转换为字符串并正确设置Content-Type头的事实。

ruarlubt

ruarlubt3#

否,XHR 2“send”方法被指定为始终将FormData对象作为multipart/form-data发送。
正如&号所建议的那样,一种选择是使用内置在Futon中每个CouchDB示例中的jquery.couch.js插件。
如果您喜欢更通用的HTTP接口,Fermata还支持URL编码请求:

fermata.json(document.myForm.action).put({'Content-Type':"application/x-www-form-urlencoded"}, {...form fields...});

另一个选择是将JSON发送到更新函数(我假设它是表单的“action”URL)。
当然,使用这些方法的诀窍是您必须自己提取表单字段,因为没有简单的DOM级别的new FormData(document.myForm)等价物返回Object而不是AFAIK。

bjg7j2ky

bjg7j2ky4#

前段时间我写了下面的函数,它收集表单值并将它们编码为url编码,这样它们就可以用内容类型application/x-www-form-urlencoded发送:

function getURLencodedForm(form)
{
  var urlEncode = function(data, rfc3986)
  {
    if (typeof rfc3986 === 'undefined') {
      rfc3986 = true;
    }

    // Encode value
    data = encodeURIComponent(data);
    data = data.replace(/%20/g, '+');

    // RFC 3986 compatibility
    if (rfc3986)
    {
      data = data.replace(/[!'()*]/g, function(c) {
        return '%' + c.charCodeAt(0).toString(16);
      });
    }

    return data;
  };

  if (typeof form === 'string') {
    form = document.getElementById(form);
  }

  var url = [];
  for (var i=0; i < form.elements.length; ++i)
  {
    if (form.elements[i].name != '')
    {
      url.push(urlEncode(form.elements[i].name) + '=' + urlEncode(form.elements[i].value));
    }
  }

  return url.join('&');
}

// Example (you can test & execute this here on this page on stackoverflow)
var url = getURLencodedForm('post-form');
alert(url);

相关问题