تحويل HTML5 FormData إلى JSON

يعد تحويل إدخالات كائن HTML5 FormData إلى JSON مهمة شائعة في تطوير الويب. على الرغم من وجود طرق مختلفة لتحقيق ذلك، إلا أن الطريقة الأكثر مباشرة وفعالية هي استخدام الدالة forEach() مباشرة على كائن FormData.

var object = {}; formData.forEach(function(value, key){ كائن [مفتاح] = القيمة؛ }); var json = JSON.stringify(object);

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

يتكرر هذا الأسلوب من خلال كل زوج من المفاتيح والقيمة في كائن FormData ويضيفها إلى كائن JavaScript جديد. يتم بعد ذلك استخدام طريقة JSON.stringify () لتحويل الكائن إلى سلسلة JSON.

التحديث: ES6 Arrow Functions

بالنسبة لأولئك الذين يفضلون بناء جملة ES6، يمكن كتابة نفس الحل باستخدام دوال الأسهم:

var object = {}; formData.forEach((value, key) => object[key] = value); var json = JSON.stringify(object);

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

التحديث 2: دعم عناصر النموذج متعددة القيم

لدعم عناصر النموذج ذات القيم المتعددة، مثل التحديد المتعدد القوائم، يمكن استخدام الكود التالي:

var object = {}; formData.forEach((القيمة، المفتاح) => { إذا(!Reflect.has(object, key)){ كائن [مفتاح] = القيمة؛ يعود؛ } إذا(!Array.isArray(object[key])){ كائن[مفتاح] = [كائن[مفتاح]]; } كائن[مفتاح].push(قيمة); }); var json = JSON.stringify(object);

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

التحديث 3: الإرسال المباشر عبر XMLHttpRequest وFetch API

يمكن إرسال FormData مباشرة إلى الخادم دون تحويل باستخدام كائن XMLHttpRequest أو Fetch API:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});

التحديث 4: تسلسل JSON للكائنات المعقدة

يمكن تعريف منطق التسلسل المخصص للكائنات المعقدة من خلال طريقة toJSON().