التعامل مع عناصر HTML وشجرة DOM باستخدم NodeJS

NodeJS يعمل على الخادم فقط، أي أنه يُحضّر صفحة HTML لإرسالها لمتصفح العميل،

في حال أردت التعامل مع العقد في شجرة DOM يتم ذلك بطرف العميل على المتصفح عن طريق Javascript، مثلًا بتنفيذ استعلام جلب عناصر div كالتالي

document.querySelectorAll('div')

بعد معالجة العناصر المرجعة من الاستعلام السابق واستخراج القيم المطلوبة منها، اذا اردنا ارسالها إلى الخادم ومعالجتها ضمن NodeJS نقوم بإرسال طلب HTTP من طرف العميل عن طريق AJAX باستخدام التابع fetch مثلًا

يمكنك القراءة أكثر عن الموضوع بالمقال التالي

افهم ماتقول لاكن كيف اقوم به ممكن توظيح 

  بتاريخ On 15‏/1‏/2022 at 20:38 قال hanan fahad11:

افهم ماتقول لاكن كيف اقوم به ممكن توظيح 

أظهر المزيد  

ضمن صفحة HTML نرفق الشيفرة التالية، أولا تتم عملية استخراج البيانات على المتصفح كالتالي 

// استعلام عن العناصر
const elements = document.querySelectorAll('div')

// استخراج القيم النصية من العناصر
const values = Array.from(elements).map(e => e.innerText)

لنفرض أن الخادم لديك يتلقى طلبات على المسار التالي

http://www.example.com/api

نقوم بإرسال مصفوفة البيانات للخادم على ذلك المسار بواسطة طلب AJAX كالتالي

fetch('http://www.example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(values),
})

على طرف الخادم يمكن استقبال البيانات المرسلة كالتالي:

var express = require('express')
var app = express()

app.use(express.json())

app.post('/api', function (req, res) {
  // البيانات التي ارسلتها الصفحة
  const values = req.body
  
  // نعالج البيانات ...
  
})

ماضبط

nproject.rar

  بتاريخ On 15‏/1‏/2022 at 22:08 قال hanan fahad11:

ماضبط

nproject.rarFetching info...

أظهر المزيد  

يرجى إرفاق الشيفرة البرمجية الخاصة بهذا القسم على شكل نص وتنسيقه بالشكل المناسب ضمن السؤال

القسم التالي يجب أن يكون بطرف الخادم وليس بطرف صفحة HTML 

var express = require('express')
var app = express()

app.use(express.json())

app.post('/api', function (req, res) {
  // البيانات التي ارسلتها الصفحة
  const values = req.body
  
  // نعالج البيانات ...
  
})

حاولي التعلم أكثر عن NodeJS وعن ExpressJS خصوصًا وكيفية استخدامهما، المقال التالي سيفيدك، إضافة إلى المقال السابق الخاص بكيفية تنفيذ طلبات AJAX من صفحة الويب ومفهومها