إرسال النماذج غير المتزامن عبر الكائن FormData | إرسال النماذج والتحقق التفاعلي واستطلاعات الرأي الحية عبر AJAX في PHP

يتيح تمرير عنصر <form> إلى الكائن new FormData(form) في JavaScript تجميع كافة حقول النموذج تلقائياً وإرسالها بحيث تملأ مصفوفتي $_POST و$_FILES في PHP مباشرة!

استدعِ event.preventDefault() داخل مستمع الحدث submit لمنع المتصفح من إعادة تحميل الصفحة تقليدياً.
مرر body: new FormData(form) إلى دالة fetch(form.action, { method: "POST", body }).
عند إرسال كائن FormData، لا تضبط رأس الطلب Content-Type يدوياً؛ لأن المتصفح يضبطه تلقائياً مع رمز الفاصل boundary الصحيح.

لأن كائن FormData يستخدم ترميز النماذج القياسي، يقرأ ملف PHP الحقول مباشرة عبر $_POST["name"] و$_POST["subject"] دون تعقيد.

مخطط توضيحي: محاكي إرسال النماذج التفاعلية والتحقق واستطلاعات الرأي بـ AJAX في PHP

PHP

<?php
// PHP receives FormData fields directly inside $_POST
$_POST = [
    'name'    => 'Nadia',
    'subject' => 'AJAX Form Inquiry',
];
$name = trim((string) ($_POST['name'] ?? ''));
$subject = trim((string) ($_POST['subject'] ?? ''));
echo json_encode([
    'ok'       => true,
    'received' => "$name: $subject",
]) . "\n";

Submitting Forms with FormData and fetch إرسال النماذج غير المتزامن عبر الكائن FormData

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (إرسال النماذج والتحقق التفاعلي واستطلاعات الرأي الحية عبر AJAX في PHP)