صياغة كائنات JSON من بيانات نموذج HTML

في مجال تطوير الويب، يعد نقل البيانات بسلاسة إلى الخوادم أمرًا بالغ الأهمية. عند التعامل مع نماذج HTML، قد يواجه المرء الحاجة إلى نقل البيانات بتنسيق JSON. تتعمق هذه المقالة في النهج الأمثل لتحقيق ذلك دون مواجهة العوائق.

خذ بعين الاعتبار نموذج HTML التالي كمثال:

  First Name:
  
  Last Name:
  
  

هدفنا هو تحويل البيانات من هذا النموذج إلى كائن JSON ونقلها إلى الخادم عند إرسال النموذج.

في البداية، ربما تكون قد حاولت إيجاد حل باستخدام الكود التالي:

function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}

ومع ذلك، فإن هذا النهج غير كافي بسبب وجود خلل حاسم. بدلاً من استرداد البيانات من النموذج، قمت بإنشاء نموذج لكائن JSON يدويًا. لتصحيح ذلك، نحتاج إلى جمع بيانات النموذج ديناميكيًا.

يكمن الحل في تسخير قوة jQuery لاستخراج بيانات النموذج كمصفوفة، والتي يمكننا بعد ذلك تحويلها إلى سلسلة JSON:

var formData = JSON.stringify($("myForm").serializeArray());

يلتقط هذا السطر من التعليمات البرمجية بشكل فعال جميع البيانات من النموذج ويحولها إلى JSON المطلوب شكل. يمكنك بعد ذلك استخدام سلسلة JSON هذه في طلب AJAX الخاص بك، أو، إذا لم يكن AJAX خيارًا، قم بدمجها في منطقة نصية مخفية وإرسال النموذج بشكل تقليدي.

علاوة على ذلك، إذا كنت ترسل البيانات كسلسلة JSON عبر نموذج HTML قياسي، ضع في اعتبارك أنه يجب فك ترميزه على جانب الخادم للوصول إلى نقاط البيانات الفردية بتنسيق مصفوفة.

باتباع هذا الأسلوب، يمكنك إرسال كائنات JSON بسهولة من نماذج HTML الخاصة بك ، مما يضمن نقل البيانات بسلاسة واتصال فعال بالخادم.