सामग्री पर जाएँ
FFormhook
← ब्लॉग पर वापस जाएँ

ब्लॉग

AJAX फ़ॉर्म सबमिशन: बिना पेज रीलोड किए फ़ॉर्म भेजें

· 4 मिनट का पठन

किसी HTML फ़ॉर्म को सामान्य तरीक़े से सबमिट करें, तो ब्राउज़र वही करता है जो वह हमेशा से करता आया है: किसी नए पेज पर नेविगेट करना, या मौजूदा पेज को रीलोड करना - और इस क्रम में कुछ क्षण पहले स्क्रीन पर जो कुछ था, वह सब खो जाता है। किसी ऐसे फ़ॉर्म के लिए जो अपने खुद के पेज पर अकेला हो, यह हानिरहित है। लेकिन किसी मॉडल, चैट विजेट, चेकआउट फ़्लो, या किसी भी सिंगल-पेज ऐप के भीतर मौजूद फ़ॉर्म के लिए, पूरा नेविगेशन एक झटके जैसा रीसेट है - मॉडल बंद हो जाता है, ऐप फिर से माउंट होता है, स्क्रॉल पोज़िशन चली जाती है। AJAX सबमिशन - ब्राउज़र को नेविगेट करने देने के बजाय JavaScript के fetch() से फ़ॉर्म डेटा भेजना - इसे ठीक कर देता है, और यह बस कुछ पंक्तियों का काम है।

पेज रीलोड से क्यों बचें

पूरा पेज रीलोड वह सब कुछ मिटा देता है जो JavaScript मेमोरी में रखे हुए था: कोई खुला हुआ मॉडल, किसी विज़ार्ड का मौजूदा चरण, पेज पर कहीं और मौजूद असंग्रहीत स्थिति। अगर फ़ॉर्म किसी React, Vue, या Svelte कॉम्पोनेंट ट्री के भीतर है, तो ब्राउज़र को नेविगेट करने देने से पूरा क्लाइंट-साइड ऐप भी ध्वस्त हो जाता है, जिसे फिर शुरू से रीलोड करना पड़ता है।

fetch() के ज़रिए सबमिट करना पेज को - और उस पर चल रहे ऐप को - बरक़रार रखता है। आगे क्या होगा, यह आप तय करते हैं: सफलता का संदेश इनलाइन दिखाना, मॉडल बंद करना, फ़ील्ड्स रीसेट करना, या चाहें तो प्रोग्रामेटिक तरीक़े से रीडायरेक्ट करना। यही अंतर है "ब्राउज़र तय करता है" और "आप तय करते हैं" के बीच।

यह एक एन्हांसमेंट है, कोई ज़रूरत नहीं

आपको इन दोनों तरीक़ों में से किसी एक को चुनने की ज़रूरत नहीं। <form> टैग पर action और method attributes को बिल्कुल वैसे ही रहने दें जैसे किसी सादे POST के लिए होते, और submit इवेंट को JavaScript से तभी इंटरसेप्ट करें जब वह उपलब्ध हो। अगर कोई स्क्रिप्ट लोड होने में विफल रहे, कोई एक्सटेंशन दख़ल दे, या किसी विज़िटर ने JavaScript पूरी तरह बंद कर रखा हो, तो भी फ़ॉर्म काम करता है - बस यह इनलाइन स्टेटस मैसेज के बजाय सामान्य पेज नेविगेशन पर वापस चला जाता है। यही प्रोग्रेसिव एन्हांसमेंट का पूरा विचार है: बेस केस - एक HTML फ़ॉर्म जो सीधे https://formhook.app/f/{apiKey} पर सबमिट करता है - हमेशा अकेले ही काम करता है। JavaScript मौजूद होने पर बस इसे और बेहतर बना देता है।

एक न्यूनतम उदाहरण

किसी फ़्रेमवर्क की ज़रूरत नहीं - यही है वैनिला JavaScript में पूरा पैटर्न। यह डिफ़ॉल्ट नेविगेशन को रोकता है, फ़ॉर्म डेटा को FormData के रूप में भेजता है, और परिणाम के आधार पर एक स्टेटस मैसेज दिखाता है:

const form = document.querySelector("#contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    body: new FormData(form),
    headers: { Accept: "application/json" },
  });
  if (res.ok) {
    form.reset();
    document.querySelector("#form-status").textContent = "Thanks - we got it.";
  } else {
    document.querySelector("#form-status").textContent = "Something went wrong. Please try again.";
  }
});

JSON माँगें, रीडायरेक्ट नहीं

ऊपर के उदाहरण में Accept: application/json हेडर पर ध्यान दें। इसके बिना, ऐसा फ़ॉर्म बैकएंड जो सादे HTML सबमिशन को भी सर्व करने के लिए बनाया गया है, ब्राउज़र को किसी "धन्यवाद" पेज पर रीडायरेक्ट करने की कोशिश कर सकता है - जो सामान्य POST के लिए सही व्यवहार है, लेकिन जब आप इसे fetch() से कॉल कर रहे हों तो बेकार है। Accept: application/json भेजना Formhook के endpoint को बताता है कि रिक्वेस्ट JavaScript से आई है, इसलिए वह रीडायरेक्ट के बजाय एक JSON सफलता या त्रुटि प्रतिक्रिया लौटाता है, और आपका कोड उदाहरण की तरह res.ok के आधार पर शाखा (branch) बना सकता है। सटीक रिक्वेस्ट फ़ॉर्मैट के लिए डॉक्स देखें।

सुलभता (accessibility) मत भूलिए

textContent से स्टेटस मैसेज बदलना स्क्रीन रीडर के लिए अदृश्य है, जब तक कि आप ब्राउज़र को इसकी घोषणा करने के लिए न कहें। स्टेटस एलिमेंट पर (वही जिसे उदाहरण में document.querySelector("#form-status") टारगेट कर रहा है) aria-live="polite" जोड़ें, और सहायक तकनीक (assistive technology) अपडेट बदलते ही उसे ज़ोर से पढ़ेगी - चाहे सफलता हो या त्रुटि - बिना विज़िटर को उसे खुद ढूँढ़ने और दोबारा फ़ोकस करने की ज़रूरत पड़े। यह बस एक attribute है, और यही अंतर तय करता है कि कोई फ़ॉर्म सबके लिए काम करता है या फिर JavaScript के नियंत्रण लेते ही चुपचाप स्क्रीन रीडर उपयोगकर्ताओं को बाहर कर देता है।

इनमें से किसी को भी किसी लाइब्रेरी या SDK की ज़रूरत नहीं - Formhook का endpoint किसी भी साइट से एक सादा फ़ॉर्म POST स्वीकार करता है, और ऊपर वाला fetch() संस्करण इसके ऊपर बस एक वैकल्पिक प्रोग्रेसिव एन्हांसमेंट है, कोई पूर्व-शर्त नहीं। पूरे रिक्वेस्ट/रिस्पॉन्स रेफ़रेंस के लिए डॉक्स देखें, और मुफ़्त स्तर की सीमाओं के लिए प्राइसिंग देखें।

एक ही लाइन में काम करने वाला फ़ॉर्म

EU-होस्टेड, सबमिशन हमेशा के लिए सुरक्षित, हर टियर पर पुश सूचनाएँ।

मुफ़्त में शुरू करें

क्रेडिट कार्ड नहीं चाहिए · दस्तावेज़ पढ़ें

आगे पढ़ें