توفر واجهة JavaScript FormData طريقة لإنشاء كائن يحتوي على أزواج قيمة المفتاح. يمكن مشاركة هذه الكائنات عبر الإنترنت باستخدام أسلوب fetch() أو XMLHttpRequest.send(). ويستخدم وظيفة عنصر نموذج HTML. سيستخدم نفس التنسيق الذي سيتم استخدامه بواسطة نموذج من نوع الترميز الذي تم تعيينه على 'متعدد الأجزاء/بيانات النموذج'.
يمكننا أيضًا تمريرها مباشرةً إلى مُنشئ URLSearchParams للحصول على معلمات الاستعلام تمامًا كما هو الحال في سلوك العلامة عند إرسال طلب GET.
بشكل عام، يتم استخدامه لإنشاء مجموعة بيانات لإرسالها إلى الخادم. كائن FormData عبارة عن مصفوفة من المصفوفات التي تحتوي على مصفوفة واحدة لكل عنصر.
تحتوي هذه المصفوفات على القيم الثلاث التالية:
اسم: أنه يحتوي على اسم المجال.
قيمة: يحتوي على قيمة الحقل، والتي يمكن أن تكون كائن سلسلة أو كائن ثنائي كبير الحجم.
اسم الملف: أنه يحتوي على اسم الملف وهو عبارة عن سلسلة تحمل الاسم. سيتم حفظ الاسم على الخادم عند تمرير كائن blob بالرقم 2اختصار الثانيمعامل.
لماذا فورم داتا؟
تم تطوير عناصر نموذج HTML بطريقة تلتقط حقولها وقيمها تلقائيًا. في مثل هذه السيناريوهات، تساعدنا واجهة FormData على إرسال نماذج HTML مع أو بدون ملفات وحقول إضافية.
إنه كائن يحتوي على إدخال بيانات النموذج من قبل المستخدم.
فيما يلي منشئ بيانات النموذج:
let formData = new FormData([form]);
يمكن قبول كائنات FormData كنص من خلال طرق الشبكة مثل الجلب. يتم ترميزه وإرساله باستخدام Content-Type: multipart/form-data بشكل افتراضي.
سيعتبره الخادم بمثابة إرسال نموذج عادي.
دعونا نفهم مثالاً بسيطًا لإرسال FormData.
إرسال بيانات النموذج الأساسية
في النموذج أدناه، نقوم بإرسال FormData بسيط إلى الخادم.
الفهرس.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); }; في المثال أعلاه، لم نقوم بإعداد أي واجهة برمجة تطبيقات خلفية لإرسال البيانات لأن ذلك يقع خارج نطاق هذا البرنامج التعليمي. ولكن يمكننا التحقق من الحمولة إلى علامة تبويب الشبكة ويمكننا فهم كيفية عمل واجهة FormData.
لذلك، إذا نظرنا إلى طلب الشبكة في أداة المطور، فسوف تظهر الحمولة التالية:
في طلب الشبكة أعلاه، يتم إرسال بيانات النموذج عبر الشبكة باستخدام كائن FormData. وبطرق أخرى، نحتاج إلى تحديد طرق متعددة للحصول على البيانات من النموذج.
وبالتالي، باستخدام واجهة FormData، يمكننا بسهولة إرسال بيانات النموذج إلى الخادم. إنه مجرد رمز ذو بطانة واحدة.
منشئ بيانات النموذج
يتم استخدام مُنشئ FormData() لإنشاء كائن FormData جديد. ويمكن استخدامه بالطرق التالية:
new FormData() new FormData(form) new FormData(form, submitter)
حدود:
النموذج (اختياري):
إنه عنصر HTML؛ إذا تم تحديده، فسيتم ملء كائن FormData بمفاتيح/قيم النموذج الحالية. ويستخدم خصائص سمة الاسم لكل عنصر للمفاتيح وقيمتها المقدمة للقيم. كما أنه يقوم بتشفير محتوى إدخال الملف.
مقدم (اختياري):
زر المرسل هو عنصر من النموذج. إذا كان عنصر المرسل يحتوي على خاصية سمة اسم، فسيتم تضمين بياناته في كائن FormData.
جافا فتح ملف
طرق بيانات النموذج
توفر FormData عدة طرق يمكن أن تكون مفيدة في الوصول إلى بيانات حقول النموذج وتعديلها.
في حالات أقل، قد نحتاج إلى تغيير بيانات النموذج قبل إرسالها إلى الخادم. هذه الطرق يمكن أن تكون مفيدة لهذه الحالات.
فيما يلي بعض أساليب formData المفيدة:
formData.append(الاسم، القيمة)
يأخذ اسم وقيمة الوسيطتين ويضيف كائن حقل النموذج بالاسم والقيمة المقدمة.
formData.append (الاسم، النقطة، اسم الملف)
يأخذ وسيطات الاسم والنقطة واسم الملف. فهو يضيف حقلاً لتكوين كائنات البيانات إذا كان عنصر HTML هو، فإن الوسيطة الثالثة fileName تقوم بتعيين اسم الملف وفقًا لاسم الملف في نظام الملفات الخاص بالمستخدم.
نموذج البيانات.حذف (الاسم)
يأخذ اسمًا كوسيطة ويزيل الحقل المحدد الذي يحمل نفس الاسم.
formData.get(الاسم)
كما أنه يأخذ اسمًا كوسيطة ويحصل على قيمة الحقل المحدد بالاسم المحدد.
formData.has (الاسم)
كما أنه يأخذ الاسم كوسيطة، ويتحقق من وجود الحقل بالاسم المحدد، ويعيد صحيحًا إذا كان موجودًا؛ وإلا كاذبة.
يمكن أن يحتوي النموذج على حقول متعددة بنفس الاسم، لذلك نحتاج إلى تحديد طرق إلحاق متعددة لإضافة كل تلك الحقول ذات الاسم نفسه.
لكن الحقول ذات الاسم نفسه ستتسبب في حدوث أخطاء وتخلق تعقيدًا في إعدادها في قاعدة البيانات. لذا، توفر بيانات النموذج طريقة أخرى بنفس بناء جملة الإلحاق، ولكنها تزيل كافة الحقول ذات الاسم المحدد ثم تقوم بإلحاق حقل جديد. وبالتالي، فهو يضمن أنه سيكون هناك مفتاح فريد يحمل اسمًا.
formData.set(name, value) formData.set(name, blob, fileName)
في الطريقة المحددة، يعمل بناء الجملة مثل طريقة الإلحاق.
كيفية تكرار 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. تعمل الملفات على عنصر النموذج ويتم إرسالها كنوع المحتوى: بيانات متعددة الأجزاء/النموذج. يسمح ترميز بيانات النموذج/الأجزاء المتعددة بإرسال الملفات. لذلك، بشكل افتراضي، هو جزء من بيانات النموذج. يمكننا إرسال الملفات إلى الخادم مع ترميز بيانات النموذج.
خذ بعين الاعتبار المثال أدناه:
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
يعد إرسال بيانات النموذج ككائن ثنائي كبير الحجم طريقة سهلة لإرسال البيانات الثنائية التي تم إنشاؤها ديناميكيًا. يمكن أن تكون أي صورة أو نقطة. يمكننا إرساله مباشرة إلى الخادم عن طريق تمريره في نص الجلب.
من السهل إرسال بيانات الصور وبيانات النماذج الأخرى مثل الاسم وكلمة المرور وما إلى ذلك. كما أن الخوادم أكثر سهولة في قبول النماذج المشفرة متعددة الأجزاء بدلاً من البيانات الثنائية.
خذ بعين الاعتبار المثال أدناه، الذي يرسل الصورة مع بيانات النموذج الأخرى كنموذج.
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 من نظام الملفات. سوف يقرأها الخادم كبيانات النموذج العادي.