मैं फ़ोकस एपी के साथ फॉर्म डेटा कैसे पोस्ट करूं?

Question

मेरा कोड:

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

मैंने अपना फॉर्म लाने की कोशिश की, और आपी ने जो शरीर भेजा, वह इस प्रकार है:

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

[e-mail]
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

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

(मुझे नहीं पता कि हर बार यह भेजने पर सीमा में संख्या क्यों बदली जाती है ...)

मैं चाहूंगा कि इसे "सामग्री-प्रकार" के साथ डेटा भेजा जाए: "आवेदन / x-www-form-urlencoded", मुझे क्या करना चाहिए? या अगर मुझे बस इससे निपटना है, तो मैं अपने नियंत्रक में डेटा को कैसे डीकोड कर सकता हूं?

---

मेरे प्रश्न का उत्तर देने के लिए, मुझे पता है कि मैं इसके साथ कर सकता हूं:

fetch("api/xxx", {
    body: "email=[e-mail]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

मुझे क्या चाहिए $ ("# फॉर्म") जैसा कुछ है। jQuery में सीरीज़ () (w / o का उपयोग jQuery) या कंट्रोलर में mulitpart / फॉर्म-डेटा को डिकोड करने का तरीका। हालांकि आपके जवाब के लिए धन्यवाद।

Comments

उपयोग करने के साथ क्या समस्या है FormData?

— अतिथि

मैं इसे "email=[e-mail]&password=pw" के रूप में पोस्ट करना चाहता हूं। क्या यह संभव है?

— ज़ैक

"मुझे नहीं पता कि हर बार यह भेजने पर सीमा में संख्या क्यों बदली जाती है ..." - सीमा पहचानकर्ता सिर्फ एक यादृच्छिक पहचानकर्ता है, यह कुछ भी हो सकता है और इसका अपने आप में कोई अर्थ नहीं है। तो वहाँ एक यादृच्छिक संख्या चुनने के साथ कुछ भी गलत नहीं है (जो कि ग्राहक आमतौर पर करते हैं)।

— प्रहार

Answer 1

पर एमडीएनFormData उद्धृत करने के लिए (जोर दें):

FormDataइंटरफ़ेस एक तरह से आसानी से प्रपत्र फ़ील्ड्स और उनके मान है, जो तब आसानी से का उपयोग कर भेजा जा सकता है का प्रतिनिधित्व कुंजी / मान जोड़े का एक सेट के निर्माण के लिए प्रदान करता है XMLHttpRequest.send()विधि। यह उसी प्रारूप का उपयोग करता है, जो एन्कोडिंग प्रकार पर सेट होने पर एक फ़ॉर्म का उपयोग करेगा"multipart/form-data" ।

तो जब FormDataआप का उपयोग कर अपने आप को बंद कर रहे हैं multipart/form-data। FormDataशरीर के रूप में एक वस्तु भेजने और प्रारूप में डेटा नहीं भेजने का कोई तरीका नहीं हैmultipart/form-data ।

यदि आप डेटा भेजना चाहते application/x-www-form-urlencodedहैं, तो आपको या तो शरीर को URL-एन्कोडेड स्ट्रिंग के रूप में निर्दिष्ट करना होगा, या किसी URLSearchParamsऑब्जेक्ट को पास करना होगा । दुर्भाग्य से उत्तरार्द्ध को सीधे एक formतत्व से शुरू नहीं किया जा सकता है। यदि आप अपने प्रपत्र तत्वों के माध्यम से स्वयं को पुनरावृत्त नहीं करना चाहते हैं (जो आप उपयोग कर सकते हैं HTMLFormElement.elements), तो आप URLSearchParamsऑब्जेक्ट से ऑब्जेक्ट भी बना सकते हैं FormData:

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

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

ध्यान दें कि आपको Content-Typeस्वयं एक हेडर निर्दिष्ट करने की आवश्यकता नहीं है ।

---

द्वारा बताया गया है भिक्षु समय टिप्पणी में, आप भी बना सकते हैं URLSearchParamsऔर पारित FormDataबजाय एक पाश में मूल्यों जोड़कर की, सीधे वस्तु:

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

यह अभी भी ब्राउज़र में कुछ प्रयोगात्मक समर्थन है, इसलिए इसका उपयोग करने से पहले इसे ठीक से परीक्षण करना सुनिश्चित करें।

Comments

आप FormDataलूप के बजाय सीधे किसी ऑब्जेक्ट या कंस्ट्रक्टर में भी उपयोग कर सकते हैं :new URLSearchParams(new FormData(formElement))

— भिक्षु-समय

@ साधु-बार हुआ है कि इस सवाल का जवाब लिखने के समय, निर्माता तर्क को URLSearchParamsथा बहुत नया और बहुत ही सीमित था समर्थन करते हैं।

— प्रहार

क्षमा करें, यह कोई शिकायत नहीं थी, केवल उन सभी के लिए एक नोट जो भविष्य में इसे पढ़ेंगे।

— भिक्षु-समय

@Prasanth आप सामग्री को स्वयं स्पष्ट रूप से निर्दिष्ट कर सकते हैं, लेकिन आपको सही एक चुनना होगा । इसे छोड़ना आसान है और fetchआपके लिए इसका ध्यान रखना आसान है ।

— प्रहार करें

@chovy URLSearchParamsको अधिकांश आधुनिक ब्राउज़रों में एक वैश्विक वस्तु के रूप में बनाया गया है और यह नोड से भी काम करता है।

— प्रहार

Answer 2

ग्राहक

सामग्री-प्रकार हेडर सेट न करें।

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

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

सर्वर

FromFormबाइंडिंग स्रोत डेटा है यह निर्दिष्ट करने के लिए विशेषता का उपयोग करें ।

[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; }
}

Comments

जबकि यह काम करता है, यह वह डेटा नहीं भेजता है application/x-www-form-urlencodedजैसा कि ओपी पूछ रहा है।

— प्रहार

मेरे लिए, यह तब काम किया जब मैंने हेडर से रिमूव Content-Type किया और ब्राउज़र को अपने आप करने दिया। धन्यवाद!

— क्रिस

धन्यवाद @regnauld इस काम को पूरे दिन करने की कोशिश कर रहा है!

— ak85

यदि आप Fetch के लिए 'Content-type' सेट नहीं करते हैं multipart/form-data, तो यह इसे सेट करने वाला है , जो कि फॉर्म डेटा के लिए होना चाहिए! तब आप multerएक्सप्रेसजेज में उस डेटा फॉर्मेट को आसानी से पार्स करने के लिए उपयोग कर सकते हैं।

— kyw

Answer 3

आप तर्क के रूप में पारित क्वेरी स्ट्रिंग bodyके URLSearchParamsसाथ एक उदाहरण के लिए सेट कर सकते हैं

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=[e-mail]&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="[e-mail]">
  <input name="password" value="pw">
  <input type="submit">
</form>

Comments

Reflect.apply(params.set, params, props)कहने का एक विशेष रूप से अपठनीय तरीका है params.set(props[0], props[1])।

— प्रहार

@ प्रोक Reflect.apply(params.set, params, props)यहाँ परिप्रेक्ष्य से पठनीय है।

— 271314

यह यहाँ केवल काम करने वाला उत्तर प्रतीत होता है: / धन्यवाद! :)

— OZZIE

Answer 4

का प्रयोग करें FormDataऔर fetchहड़पने और भेजें आंकड़ों के

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="[e-mail]">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

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

Answer 5

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"
  });
 }

Comments

कोड केवल जवाब आमतौर पर सुधार किया जा सकता है कि वे कैसे और क्यों काम करते हैं की कुछ व्याख्या जोड़कर। मौजूदा उत्तरों के साथ दो साल पुराने प्रश्न के उत्तर को जोड़ते समय यह बताना महत्वपूर्ण है कि आपके उत्तर के प्रश्न का नया पहलू क्या है।

— जेसन एलर