جافا سكريبت - يبدو أن FormData المُنشأ من نموذج موجود فارغ عندما أقوم بتسجيله

أحاول الحصول على مجموعة من المفاتيح (<input> أسماء أو ما شابه) والقيم (<input> القيم) من نموذج ويب:

<body>
  <form>
    <input type="text" name="banana" value="swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>

وفقًا لوثائق FormData، يجب أن يحتوي formData على المفاتيح والقيم من النموذج. لكن console.log(formData) يظهر أن formData فارغ.

كيف يمكنني الحصول بسرعة على البيانات من النموذج باستخدام FormData؟

JSFiddle

الإجابة رقم 1

تحديث: مواصفة XHR تتضمن الآن عدة دوال إضافية لفحص كائنات FormData.

لقد دعم فايرفوكس الوظائف الأحدث منذ الإصدار 39.0، ومن المقرر أن يحصل كروم على الدعم في الإصدار 50. لست متأكدًا بشأن المتصفحات الأخرى.

var form = document.querySelector('form');
var formData = new FormData(form);

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

//or

console.log(...formData)

الإجابة رقم 2

واجهت نفس المشكلة أيضًا. لم أتمكن من الرؤية على وحدة التحكم. تحتاج إلى إضافة ما يلي إلى طلب الأجاكس، بحيث يتم إرسال البيانات

processData: false, contentType: false 

الإجابة رقم 3

لكن console.log(formData) يظهر أن formData فارغ.

ماذا تعني بـ "فارغ"؟ عندما أجرب هذا في كروم، يظهر ‣ FormData {append: function} ... بمعنى أنه كائن FormData، وهذا ما كنا نتوقعه. لقد أنشأت مثالًا موسعًا بهذا الكود:

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

...وهذا ما رأيته في لوحة الشبكة لأدوات مطوري كروم:

لذلك الكود يعمل كما هو متوقع.

أعتقد أن الانفصال هنا هو أنك تتوقع أن تعمل FormData مثل كائن JavaScript عادي أو مصفوفة وتسمح لك بالنظر مباشرة في محتوياتها والتلاعب بها. للأسف، لا تعمل بهذا الشكل — فـ FormData لديها طريقة واحدة فقط في واجهة برمجتها العامة، وهي append. تقريبًا كل ما يمكنك فعله بها هو إنشاؤها، إضافة القيم إليها، وتمريرها إلى XMLHttpRequest.

إذا كنت تريد الحصول على قيم النموذج بطريقة يمكنك فحصها والتلاعب بها، فسوف تضطر للقيام بذلك بالطريقة التقليدية: عن طريق التكرار عبر عناصر الإدخال والحصول على كل قيمة واحدًا تلو الآخر — أو باستخدام دالة كتبها شخص آخر، مثل دالة jQuery. إليك موضوعًا على Stack Overflow يحتوي على بعض الأساليب لذلك: كيف يمكنني الحصول على بيانات النموذج باستخدام JavaScript/jQuery؟