ממשק JavaScript FormData מספק שיטה ליצירת אובייקט בעל צמדי מפתח-ערך. ניתן לשתף אובייקטים אלה דרך האינטרנט באמצעות שיטת fetch() או XMLHttpRequest.send() . הוא משתמש בפונקציונליות של רכיב הטופס HTML. זה ישתמש באותו פורמט שישמש את הטופס מסוג הקידוד מוגדר ל-'multipart/form-data'.
אנחנו יכולים גם להעביר אותו ישירות לבנאי URLSearchParams כדי לקבל את פרמטרי השאילתה בדיוק כמו בהתנהגות התג בהגשת בקשת GET.
בדרך כלל, הוא משמש ליצירת מערך נתונים כדי לשלוח אותו לשרת. האובייקט FormData הוא מערך של מערכים המכיל מערך אחד עבור כל אלמנט.
למערכים הללו יש את שלושת הערכים הבאים:
שֵׁם: הוא מכיל את שם השדה.
ערך: הוא מכיל את ערך השדה, שיכול להיות אובייקט String או Blob.
שם קובץ: הוא מכיל את שם הקובץ שהוא מחרוזת שמחזיקה את השם. השם יישמר בשרת כאשר אובייקט כתם יועבר כ-2נדפָּרָמֶטֶר.
למה FormData?
רכיבי טופס ה-HTML מפותחים בצורה שתופס אוטומטית את השדות והערכים שלו. בתרחישים כאלה, ממשק FormData עוזר לנו לשלוח טפסי HTML עם או בלי קבצים ושדות נוספים.
זהו אובייקט שמכיל את נתוני הטופס שהמשתמש קלט.
להלן בונה נתוני הטופס:
let formData = new FormData([form]);
ניתן לקבל את אובייקטי FormData כגוף על ידי שיטות הרשת כגון אחזור. הוא מקודד ונשלח עם ה-Content-Type: multipart/form-data כברירת מחדל.
השרת יראה זאת כהגשת טופס רגילה.
בואו נבין דוגמה פשוטה של שליחת ה-FormData.
שליחת FormData בסיסי
בטופס שלהלן, אנו שולחים FormData פשוט לשרת.
Index.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; בדוגמה שלמעלה, אנחנו לא מגדירים שום API backend לשליחת הנתונים מכיוון שזה מעבר להיקף של מדריך זה. אבל, אנחנו יכולים לבדוק את המטען ללשונית הרשת ונוכל להבין איך ממשק FormData עובד.
לכן, אם נסתכל על בקשת הרשת בכלי המפתחים, היא תציג את המטען הבא:
בבקשת הרשת לעיל, נתוני הטופס נשלחים דרך הרשת באמצעות האובייקט FormData. בדרכים אחרות, עלינו לציין מספר שיטות כדי לקבל את הנתונים מהטופס.
כך, באמצעות ממשק FormData, נוכל לשלוח בקלות את ה-formData לשרת. זה רק קוד אחד.
FormData Constructor
הבנאי FormData() משמש ליצירת אובייקט FormData חדש. ניתן להשתמש בו בדרכים הבאות:
new FormData() new FormData(form) new FormData(form, submitter)
פרמטרים:
טופס (אופציונלי):
זהו אלמנט HTML; אם יצוין, אובייקט FormData יאוכלס במפתחות/ערכים הנוכחיים של הטופס. הוא משתמש במאפייני תכונת השם של כל אלמנט עבור המפתחות ובערך שנשלח עבור הערכים. זה גם מקודד תוכן קלט קובץ.
מגיש (אופציונלי):
כפתור המגיש הוא רכיב של טופס. אם לרכיב המגיש יש מאפיין תכונה שם, הנתונים שלו ייכללו באובייקט FormData.
mvc java
שיטות FormData
FormData מספק מספר שיטות שיכולות להיות מועילות בגישה ושינוי של נתוני שדות הטופס.
בפחות מקרים, ייתכן שנצטרך לשנות את נתוני הטופס לפני שליחתם לשרת. שיטות אלו יכולות להועיל למקרים אלו.
להלן כמה שיטות שימושיות של formData:
formData.append(שם, ערך)
הוא לוקח את השם והערך של שני ארגומנטים ומוסיף אובייקט שדה טופס עם השם והערך שסופקו.
formData.append(שם, כתם, שם קובץ)
זה לוקח את הארגומנטים name, blob ו-fileName. זה מוסיף שדה ליצירת אובייקטי נתונים אם רכיב ה-HTML הוא , אז הארגומנט השלישי fileName מגדיר את שם הקובץ לפי שם הקובץ במערכת הקבצים של המשתמש.
formData.delete(name)
זה לוקח שם כארגומנט ומסיר את השדה שצוין בעל אותו שם.
formData.get(name)
זה גם לוקח שם כארגומנט ומקבל את הערך של השדה שצוין עם השם הנתון.
formData.has(name)
הוא גם לוקח את השם כארגומנט, בודק את קיומו של השדה עם השם הפרטי, ומחזיר אמת אם הוא קיים; אחרת שקר.
טופס יכול לכלול מספר שדות עם אותו שם, לכן עלינו לציין מספר שיטות הוספה כדי להוסיף את כל אותם שדות בעלי שם זהה.
אבל השדות בעלי אותו השם יגרמו לשגיאות ויצרו מורכבות בהגדרתם במסד הנתונים. אז, ה-formData מספק שיטה אחרת עם אותו תחביר כמו append, אבל הוא מסיר את כל השדות עם השם הנתון ואז מוסיף שדה חדש. כך, הוא מבטיח שיהיה מפתח ייחודי עם שם.
formData.set(name, value) formData.set(name, blob, fileName)
בשיטת הסט, התחביר עובד כמו שיטת ה-append.
כיצד לבצע איטרציה של FormData?
FormData מספק שיטה FormData.entries() לחזרה על כל המפתחות שלו. שיטה זו מחזירה איטרטור החוזר על כל ערכי המפתח/ערך ב-FormData. מפתח הוא אובייקט מחרוזת, בעוד שהערך יכול להיות כתם או מחרוזת.
שקול את הדוגמה הבאה:
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } הפלט של הדוגמה לעיל יהיה:
key1, value1 key2, value2
שליחת טופס עם קובץ נתונים
ניתן לשלוח את הקבצים גם באמצעות FormData. הקבצים עובדים על אלמנט הטופס והוא נשלח כ-Content-Type: multipart/form-data. קידוד ריבוי חלקים/טופס-נתונים מאפשר שליחת קבצים. אז, כברירת מחדל, הוא חלק מנתוני הטופס. אנחנו יכולים לשלוח את הקבצים לשרת עם קידוד הטופס-נתונים.
שקול את הדוגמה הבאה:
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; בדוגמה שלמעלה, אובייקט התמונה נשלח בפורמט הבינארי באמצעות FormData. נוכל לראות את זה בכרטיסיית הרשת של כלי המפתחים:
שליחת נתוני טופס כאובייקט Blob
שליחת נתוני טופס כאובייקט כתם היא דרך קלה לשלוח את הנתונים הבינאריים שנוצרו באופן דינמי. זה יכול להיות כל תמונה או כתם; נוכל לשלוח אותו ישירות לשרת על ידי העברתו בגוף האחזור.
מיזוג מיון java
זה נוח לשלוח נתוני תמונה ונתוני טפסים אחרים כגון שם, סיסמה וכו'. כמו כן, השרתים ידידותיים יותר לקבל טפסים מקודדים מרובי חלקים ולא נתונים בינאריים.
שקול את הדוגמה שלהלן, שהיא שליחת התמונה יחד עם נתוני הטופס האחרים כטופס.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } בדוגמה לעיל, אנו יכולים לראות את כתם התמונה מתווסף באופן הבא:
formData.append('image', imageBlob, 'image.webp');
וזה זהה ל-, והמשתמש שלח קובץ בשם 'image.webp' עם קצת נתונים imageBlob ממערכת הקבצים. השרת יקרא את זה כנתוני טופס רגילים.