Wie poste ich Formulardaten mit Fetch API?

Mein Code:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

Ich habe versucht, mein Formular mit der Abruf-API zu veröffentlichen, und der gesendete Text lautet wie folgt:

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(Ich weiß nicht, warum die Nummer in der Grenze jedes Mal geändert wird, wenn sie sendet ...)

Ich möchte, dass die Daten mit "Content-Type" gesendet werden: "application / x-www-form-urlencoded". Was soll ich tun? Oder wie dekodiere ich die Daten in meinem Controller, wenn ich mich nur darum kümmern muss?

Wem meine Frage beantwortet, ich weiß, dass ich es tun kann mit:

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

Was ich möchte, ist so etwas wie $ ("# form"). Serialize () in jQuery (ohne Verwendung von jQuery) oder die Art und Weise, Mulitpart- / Formulardaten im Controller zu dekodieren. Vielen Dank für Ihre Antworten.

Um MDNFormData zu zitieren (Hervorhebung von mir):

Die FormDataSchnittstelle bietet eine Möglichkeit, auf einfache Weise eine Reihe von Schlüssel / Wert-Paaren zu erstellen, die Formularfelder und deren Werte darstellen, die dann mithilfe der XMLHttpRequest.send()Methode einfach gesendet werden können . Es verwendet dasselbe Format, das ein Formular verwenden würde, wenn der Codierungstyp festgelegt wäre"multipart/form-data" .

Wenn FormDataSie also verwenden, schließen Sie sich ein multipart/form-data. Es gibt keine Möglichkeit, ein FormDataObjekt als Hauptteil zu senden und keine Daten im multipart/form-dataFormat zu senden .

Wenn Sie die Daten so senden möchten, müssen application/x-www-form-urlencodedSie entweder den Text als URL-codierte Zeichenfolge angeben oder ein URLSearchParamsObjekt übergeben. Letzteres kann leider nicht direkt aus einem formElement initialisiert werden . Wenn Sie Ihre Formularelemente nicht selbst durchlaufen möchten (was Sie auch tun könntenHTMLFormElement.elements ), können Sie auch ein URLSearchParamsObjekt aus einem FormDataObjekt erstellen :

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

Beachten Sie, dass Sie selbst keinen Content-TypeHeader angeben müssen .

Wie von monk-time in den Kommentaren angegeben, können Sie URLSearchParamsdas FormDataObjekt auch direkt erstellen und übergeben , anstatt die Werte in einer Schleife anzuhängen:

const data = new URLSearchParams(new FormData(formElement));

Dies hat jedoch noch einige experimentelle Unterstützung in Browsern. Testen Sie dies daher ordnungsgemäß, bevor Sie es verwenden.

Klient

Legen Sie den Inhaltstyp-Header nicht fest.

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

Server

Verwenden Sie das FromFormAttribut, um anzugeben, dass es sich bei der Bindungsquelle um Formulardaten handelt.

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpPost]
    public IActionResult Create([FromForm]UserDto dto)
    {
        return Ok();
    }
}

public class UserDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

Sie können bodyeine Instanz festlegen , deren URLSearchParamsAbfragezeichenfolge als Argument übergeben wird

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=test@example.com&password=pw")
})

document.forms[0].onsubmit = async(e) => {
  e.preventDefault();
  const params = new URLSearchParams([...new FormData(e.target).entries()]);
  // fetch("/path/to/server", {method:"POST", body:params})
  const response = await new Response(params).text();
  console.log(response);
}

<form>
  <input name="email" value="test@example.com">
  <input name="password" value="pw">
  <input type="submit">
</form>

Verwenden Sie FormDataund fetch, um Daten zu erfassen und zu senden

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="a@b.com">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before/after 'submit'

function card(fileUri) {
let body = new FormData();
let formData = new FormData();
formData.append('file', fileUri);

fetch("http://X.X.X.X:PORT/upload",
  {
      body: formData,
      method: "post"
  });
 }