फ़ेच एपीआई के साथ फॉर्म डेटा पोस्ट करना

फॉर्म डेटा जमा करने के लिए फ़ेच एपीआई का उपयोग करते समय, विचार करने के लिए दो मुख्य प्रारूप हैं:

मल्टीपार्ट/ फॉर्म-डेटा

अनुरोध निकाय के निर्माण के लिए फॉर्मडेटा का उपयोग करते समय, डेटा स्वचालित रूप से मल्टीपार्ट/फॉर्म-डेटा प्रारूप में भेजा जाएगा। यह फॉर्मडेटा का एक डिफ़ॉल्ट व्यवहार है और इसे संशोधित नहीं किया जा सकता है।

Application/x-www-form-urlencoded

डेटा को एप्लिकेशन/x-www-form-urlencoded प्रारूप में भेजने के लिए, आप कुछ विकल्प हैं:

1. यूआरएल-एन्कोडेड स्ट्रिंग:

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

2. URLSearchParams ऑब्जेक्ट:

const data = new URLSearchParams();
data.append("email", "[email protected]");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});

ध्यान दें कि URLSearchParams का उपयोग करते समय सामग्री-प्रकार हेडर निर्दिष्ट करना आवश्यक नहीं है, क्योंकि यह स्वचालित रूप से सही सामग्री प्रकार सेट करता है।

3. फॉर्मडेटा से URLSearchParams:

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

fetch("api/xxx", {
    body: data,
    method: "post",
});

यह विकल्प आपको URLSearchParams ऑब्जेक्ट बनाने के लिए सीधे फॉर्मडेटा ऑब्जेक्ट को पास करने की अनुमति देता है। हालाँकि, इसमें सीमित ब्राउज़र समर्थन हो सकता है, इसलिए इसका उपयोग करने से पहले इसका अच्छी तरह से परीक्षण करना सुनिश्चित करें।