إرسال بيانات الـ Form باستخدام Fetch API في JavaScript: دليل شامل مع شرح كائن FormData وأمور مفيدة
تستخدم الوظيفة Fetch API في JavaScript لجلب البيانات من API بطريقة GET وإرسال البيانات إلى API بطريقة POST. يمكن استخدام Fetch API أيضًا لإرسال بيانات الـ Form باستخدام الكائن FormData. في هذا المقال، سنشرح كيفية إرسال بيانات الـ Form باستخدام Fetch API في JavaScript، مع شرح الكائن FormData وبعض الأمور المفيدة.
كيفية إرسال بيانات الـ Form باستخدام Fetch API في JavaScript:
يمكن استخدام الوظيفة fetch() في JavaScript لإرسال بيانات الـ Form باستخدام الكائن FormData. يجب تعريف خيارات الطلب الخاصة بطلب POST، وتعريف جسم الطلب ككائن FormData.
على سبيل المثال، يمكن استخدام الوظيفة fetch() لإرسال بيانات الـ Form على النحو التالي:
const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('https://example.com/api/users', {
method: 'POST',
body: formData
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
});
في الكود أعلاه، يتم استخدام الوظيفة fetch() لإرسال بيانات الـ Form إلى الـ API على العنوان 'https://example.com/api/users'. يتم تعريف خيار الطلب method كـ 'POST' ويتم تحويل جسم الطلب إلى كائن FormData باستخدام new FormData(this).
كود HTML:
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Submit</button>
</form>
في الكود أعلاه، يتم تعريف الـ Form وحقول الـ Input وإعطاؤها أسماء 'name' و 'email'.
شرح كائن FormData:
كائن FormData يسمح بتخزين البيانات التي تم إدخالها في الـ Form وإرسالها كجسم الطلب في fetch(). يمكن إضافة حقول النموذج إلى كائن FormData باستخدام append().
على سبيل المثال، يمكن إنشاء كائن FormData على النحو التالي:
const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'john.doe@example.com');
في الكود أعلاه، يتم إنشاء كائن FormData وإضافة حقول النموذج 'name' و 'email' باستخدام append().
أمور مفيدة:
- يجب استخدام الوظيفة event.preventDefault() في حدث submit على الـ Form لمنع إعادة تحميل الصفحة عند الإرسال.
- يمكن استخدام الوظيفة forEach() مع FormData لتصفح الحقول الموجودة في الـ Form.
- يمكن استخدام الوظيفة set() مع FormData لتعيين قيمة حقل محدد.
- يمكن إرسال بيانات الـ Form بشكل متزامن أو غير متزامن باستخدام الوظيفة fetch().
- يمكن استخدام Fetch API لإرسال بيانات الـ Form والملفات في آن واحد.
الخلاصة:
باستخدام Fetch API وكائن FormData، يمكن إرسال بيانات الـ Form إلى API بطريقة سهلة وفعالة. يمكن تعريف خيارات الطلب الخاصة بطلب POST وتحويل جسم الطلب إلى كائن FormData. يمكن أيضًا استخدام Fetch API لإرسال بيانات الـ Form والملفات في آن واحد. يجب توفير الـ Form في ملف HTML الخاص بالصفحة وإعطاء الحقول أسماء لتعريفها.
فيديو إضافية ل شرح إرسال بيانات الـ Form باستخدام Fetch API في JavaScript + شرح FormData
تعليقات
إرسال تعليق