از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
تبدیل داده‌های فرم به شی جاوا اسکریپت هنگام کار با فرم‌ها در جاوا اسکریپت، معمولاً باید داده‌های فرم را به یک شی جاوا اسکریپت (JSON) تبدیل کنید تا یک آرایه، پایگاه داده، ذخیره‌سازی محلی، ارسال آن به یک API یا حتی مصرف آن داده ها در برنامه شما تبدیل بین داده های فرم و JSON یکی از …
سرفصلهای مطلب
معرفی
هنگام کار با فرم‌ها در جاوا اسکریپت، معمولاً باید داده‌های فرم را به یک شی جاوا اسکریپت (JSON) تبدیل کنید تا یک آرایه، پایگاه داده، فضای ذخیره‌سازی محلی را پر کنید، آن را به یک API ارسال کنید، یا حتی داده‌های موجود در برنامه خود را مصرف کنید. تبدیل بین داده‌های فرم و JSON یکی از رایج‌ترین روش‌ها است process داده‌ها را تشکیل می‌دهند زیرا درها را به روی تعداد زیادی از کاربردهای دیگر آن داده باز می‌کند.
در این مقاله، روش تبدیل آسان داده‌های فرم به یک شی جاوا اسکریپت را بدون نصب وابستگی‌های غیرضروری بررسی خواهیم کرد. ما فقط با استفاده از آن به آن خواهیم رسید FormData API – یک API داخلی مرورگر که برای دریافت مقادیر فرم به عنوان اشیاء جاوا اسکریپت استفاده می شود.
توجه داشته باشید: این برنامه به صورت دمو در دسترس است روی CodePen.
بیایید با ایجاد یک فرم ساده HTML حاوی چندین فیلد فرم رایج – دو فیلد ورودی، یک ناحیه متنی و یک دکمه ارسال، شروع کنیم:
<form>
<div class="form-control">
<label for="name">Full Name</label>
<input id="name" name="name" type="text" />
</div>
<div class="form-control">
<label for="email">Email Address</label>
<input id="email" name="email" type="email" />
</div>
<div class="form-control">
<label for="message">Enter a Message</label>
<textarea id="message" name="message" rows="6" cols="65"></textarea>
</div>
<button class="btn" type="submit">Send</button>
</form>
اکنون می‌توانیم نگاهی به روش تبدیل داده‌های آن به JSON بیندازیم (نشانگذاری شی جاوا اسکریپت) با استفاده از FormData API.
FormData API
FormData یک API داخلی مرورگر است که راهی برای دسترسی آسان به هر فیلدی از فرم HTML در اختیار ما قرار می دهد. اولین قدم در استفاده از FormData API این است که به دست آورید عنصر فرم با استفاده از برخی از روش های مناسب HTML DOM – document.querySelector() یا document.getElementById(). پس از آن، می توانیم شنونده رویداد اضافه کنیم که تماس می گیرد callbackFunction وقتی الف را ثبت می کند submit رویداد روی فرم:
const form = document.getElementById('contact-form');
form.addEventListener('submit', callbackFunction);
برای اینکه شنونده رویداد کار کند، باید تابعی را تعریف کنیم که به آن رسیدگی می کند submit رویداد. در حال حاضر، اجازه دهید آن را ایجاد کند FormData شی و محتوای آن را وارد کنید console:
function callbackFunction(event) {
event.preventDefault();
const myFormData = new FormData(event.target);
console.log(myFormData);
}
توجه داشته باشید: ما استفاده کردیم preventDefault() برای جلوگیری از بارگیری مجدد فرم پس از کلیک روی دکمه ارسال – که رفتار پیش فرض است. این یک پیش‌فرض معقول است، اما برای مثال در برنامه ما – از آن جلوگیری می‌کنیم و داده‌ها را نمایش می‌دهیم روی تقسیم سمت راست
هنگامی که کد بالا را اجرا می کنید، نتیجه یک شی خالی خواهد بود، که آن چیزی نیست که ما انتظار داشتیم:
FormData {}
حتی اگر به نظر برسد که ما یک شی خالی ایجاد کرده ایم، اما اینطور نیست. که FormData شیء برای هر قسمت به شکل ما یک جفت ارزش کلیدی دارد – بنابراین ، ما باید بیش از همه آن جفت ها تکرار کنیم و آنها را در یک شی جداگانه ذخیره کنیم. پس از آن ، ما می توانیم از آن شی برای دسترسی به هر قسمت جداگانه از فرم خود استفاده کنیم.
دو راه عمده برای دریافت داده از FormData API وجود دارد – یکی این است که از طریق هر جفت کلید-مقدار حلقه بزنیم و دیگری استفاده از Object.fromEntries() روش.
چگونه داده های فرم را با حلقه ها به JSON تبدیل کنیم
اولین راه برای ایجاد یک شی خوانا از a FormData شیء این است که بیش از جفت های ارزش کلیدی خود را تکرار کنید و کلیدها و مقادیر را به صورت دستی به شی تازه ایجاد شده اضافه کنید. برای هدف این مقاله، ما از forEach() حلقه در جاوا اسکریپت اول از همه ، ما یک شیء خالی ایجاد خواهیم کرد و سپس بیش از FormData شیئی که در بخش قبل ایجاد کردیم:
const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj(key) = value));
توجه داشته باشید: این forEach() روش نیست async دوستانه ، اگر برای پشتیبانی به عملکرد پاسخ به تماس خود نیاز دارید async تماس – شما باید از for-of حلقه
در این مرحله می‌توانیم آن را اصلاح کنیم callbackFunction() از قسمت قبل به طوری که به درستی داده های فرم را به عنوان یک شی خروجی می دهد:
const form = document.getElementById('contact-form');
form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
event.preventDefault();
const myFormData = new FormData(event.target);
const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj(key) = value));
console.log(formDataObj);
});
اکنون ، وقتی فرم خود را پر می کنیم و روی دکمه ارسال کلیک می کنیم ، باید خروجی زیر را داشته باشیم:
{
"name": "John Doe",
"email": "(email protected)",
"message": "Hello World"
}
این شی دارای نام فیلدها به عنوان کلید و مقادیر فیلد مربوطه به عنوان مقادیر آن است.
روش تبدیل داده های فرم به JSON با Object.fromEntries()
به طور متناوب، می توانیم از آن استفاده کنیم Object.fromEnteries() روش به جای حلقه ها برای بازیابی فیلدهای فرم از FormData هدف – شی. به این ترتیب ما نیازی به ایجاد یک شی خالی قبل از شروع نداریم – این روش به ما اجازه می دهد تا مستقیماً آن را تبدیل کنیم FormData شیء به شی جاوا اسکریپت مربوطه:
const formDataObj = Object.fromEntries(myFormData.entries());
در این مرحله، تابع تماس اصلاح شده ما به صورت زیر خواهد بود:
const form = document.getElementById('contact-form');
form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
event.preventDefault();
const myFormData = new FormData(event.target);
const formDataObj = Object.fromEntries(myFormData.entries());
console.log(formDataObj);
});
شیئی که با استفاده از Object.fromEnteries() نام فیلدهای فرم به عنوان کلید و مقادیر فرم مربوطه به عنوان مقادیر آن خواهد بود:
{
"name": "John Doe",
"email": "(email protected)",
"message": "Hello World"
}
توجه داشته باشید: برای هر دو روش می توانیم استفاده کنیم JSON.stringify() برای تبدیل شی به یک رشته JSON، که سپس می توانیم از آن برای ارسال داده های رمزگذاری شده JSON به API ها استفاده کنیم.
روش دریافت چندین مقدار انتخابی در JSON با API FormData
روش های فوق تقریباً با تمام فیلدهای فرم سازگار هستند – متن ورودی، شماره، رادیو، انتخاب… با این حال، فیلدهای دیگری نیز وجود دارند که کار با آنها کمی دشوارتر است. قابل توجه ترین آنها است چک باکس – اجازه می دهد تا چندین مقدار را انتخاب کنید. اما روش‌های نشان‌داده‌شده قبلی، تمام مقادیر انتخاب‌شده را با یک مورد جایگزین می‌کنند – که در نهایت در شیء به‌دست‌آمده ذخیره می‌شود. بیایید نگاهی به روش حل آن بیاندازیم و تمام مقادیر انتخاب شده را در شیء به دست آمده ذخیره کنیم. فرض کنید یک فرم HTML با یک فیلد چک باکس داریم:
<!-- -->
<div class="form-control-2">
<p class="group-label">Your favorite pet:</p>
<input type="checkbox" name="favorite_pet" value="Cats" />Cats
<input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
<input type="checkbox" name="favorite_pet" value="Birds" />Birds
</div>
<!-- -->
ما می توانیم تمام داده های انتخاب شده را در یک آرایه با استفاده از getAll() روش روی را FormData هدف – شی:
formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
در این مرحله، کد ما چیزی شبیه به این خواهد بود:
const form = document.getElementById('contact-form');
form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
event.preventDefault();
const myFormData = new FormData(event.target);
const formDataObj = Object.fromEntries(myFormData.entries());
formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
console.log(formDataObj);
});
و شی پر شده حاوی آرایه ای از مقادیر خواهد بود که کاربر در قسمت چک باکس انتخاب کرده است:
{
"name": "uhuk",
"email": "(email protected)",
"message": "jgghhjb",
"favorite_pet": (
"Cats",
"Birds"
)
}
توجه داشته باشید: می توانید این را بررسی کنید نسخه ی نمایشی زنده روی CodePen که از تمام انواع فیلدهای اصلی استفاده می کند و داده ها را هنگام ارسال به عنوان یک شی جاوا اسکریپت تولید می کند.
نتیجه
در این مقاله، نگاهی به روش استفاده از FormData API برای تبدیل داده‌های فرم به اشیاء جاوا اسکریپت بدون هیچ گونه وابستگی اضافی انداخته‌ایم. ما همچنین یاد گرفته‌ایم که چگونه انواع مختلف فیلدهای فرم (ورودی‌ها، قسمت‌های متن و غیره) و همچنین برخی موارد پیچیده‌تر مانند چک باکس را به درستی مدیریت کنیم.
منتشر شده در 1403-01-08 22:36:04
