كيف يمكن تمرير قيم عبر الرابط لحلب محتوى الصفحه

علي الكاسر · 25 أغسطس 2022

واجهتني مشكله لم اعرف كيف احلها، وهي كيف يمكن تمرير قيم عبر الرابط لحلب محتوى الصفحه

مثلا لو لدي صفحة user وبناء على القيمه التي نمررها للصفحه هذه تقوم بارجاع معلومات المستخدم المرر اسمه او عنوان الاي دي خاصته.

لقد عملت بعض الحلول ولكنها كانت فيها عيوب وهي عند اعادة تحميل الصفحه تضيع القيمه الممره ويخدث خطاء

عمر قره محمد · 25 أغسطس 2022

يمكنك استخدام الـ query لإرسال هذه البيانات، حيث تقوم بوضع هذه الـ query في الرابط بالشكل التالي :

www.example.com?lan1=JavaScript&lan2=HTML

ويمكنك الحصول على هذه المعلومات من الصفحة الثانية كالتالي :

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

console.log(params.lang1); // JavaScript
console.log(params.lan2); // HTML

للمعرفة اكثر عن الـ url و خواصه اقرأ هذا المقال :

علي الكاسر · 25 أغسطس 2022

بتاريخ 32 دقائق مضت قال عمر قره محمد:

يمكنك استخدام الـ query لإرسال هذه البيانات، حيث تقوم بوضع هذه الـ query في الرابط بالشكل التالي :

انا استخدمت هذا السكربت وانا بصدد عمل موقع بصفحه واحده، واتضح ان تمرير القيم عبر الرابط صعب مع هذا السكربت

<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <header> <!-- أضفنا براميتر جديد لوظيفة تغيير الصفحة --> <li><a onclick="getPage(1 , true)">الصفحة الاولى</a></li> <li><a onclick="getPage(2 , true)">الصفحة الثانية</a></li> </header> <div id="jsContent"></div> <script> const htmlContainer = document.getElementById("jsContent"); function page1() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الاولى </h1> <p> محتوى الصفحةالاولى </p> `; htmlContainer.append(section); } function page2() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الثانية </h1> <p> محتوى الصفحةالثانية </p> `; htmlContainer.append(section); } function clearPages() { htmlContainer.innerHTML = ""; } function getPage(pageNumber, setHistory) { clearPages(); if (pageNumber === 1) { page1(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=1" القيمة if (setHistory) history.pushState({ page: 1 }, `page 1`, "?page=1"); } else { page2(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=2" القيمة if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2"); } } // هذه حدث مبني في جافاسكريبت ينطلق عند تغيير السجل window.onpopstate = function (event) { console.log(event.state); // { page: 2 } or { page: 2 } const page = event.state.page; // وضعنا الشرط التالي لكي يستطيع المستخدم الرجوع للصفحات التي دخلها قبل دخول الموقع الخاص بنا // حيث انه من دون هذا الشرط سيحدث خطأ عندما يحاول التراجع ليخرج من الموقع الخاص بنا if (page) getPage(page, false); }; </script> </body> </html>

عمر قره محمد · 25 أغسطس 2022

بتاريخ منذ ساعة مضت قال علي الكاسر:

انا استخدمت هذا السكربت وانا بصدد عمل موقع بصفحه واحده، واتضح ان تمرير القيم عبر الرابط صعب مع هذا السكربت


<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <header> <!-- أضفنا براميتر جديد لوظيفة تغيير الصفحة --> <li><a onclick="getPage(1 , true)">الصفحة الاولى</a></li> <li><a onclick="getPage(2 , true)">الصفحة الثانية</a></li> </header> <div id="jsContent"></div> <script> const htmlContainer = document.getElementById("jsContent"); function page1() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الاولى </h1> <p> محتوى الصفحةالاولى </p> `; htmlContainer.append(section); } function page2() { const section = document.createElement("section"); section.innerHTML = ` <h1> الصفحة الثانية </h1> <p> محتوى الصفحةالثانية </p> `; htmlContainer.append(section); } function clearPages() { htmlContainer.innerHTML = ""; } function getPage(pageNumber, setHistory) { clearPages(); if (pageNumber === 1) { page1(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=1" القيمة if (setHistory) history.pushState({ page: 1 }, `page 1`, "?page=1"); } else { page2(); // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط //إختيارية "?page=2" القيمة if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2"); } } // هذه حدث مبني في جافاسكريبت ينطلق عند تغيير السجل window.onpopstate = function (event) { console.log(event.state); // { page: 2 } or { page: 2 } const page = event.state.page; // وضعنا الشرط التالي لكي يستطيع المستخدم الرجوع للصفحات التي دخلها قبل دخول الموقع الخاص بنا // حيث انه من دون هذا الشرط سيحدث خطأ عندما يحاول التراجع ليخرج من الموقع الخاص بنا if (page) getPage(page, false); }; </script> </body> </html>

لا ليس صعباً لاحظ انك تستطيع تمريره في الوظيفة pushState في الخانة الثالثة :

history.pushState({ page: 1 }, `page 1`, "?page=1");

ولتمرير الكويري السابقة تستطيع فعل ذلك بالطريقة التالية :

history.pushState({ page: 1 }, `page 1`, "?lan1=JavaScript&lan2=HTML");

ويمكنك الوصول لهذه البيانات كالتالي :

function getPage(pageNumber, setHistory) {
  clearPages();
  if (pageNumber === 1) { 
    // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط
    //إختيارية "?page=1" القيمة
    if (setHistory)
      history.pushState(
        { page: 1 },
        `page 1`,
        "?lan1=JavaScript&lan2=HTML"
      );
    const params = new Proxy(
      new URLSearchParams(window.location.search),
      {
        get: (searchParams, prop) => searchParams.get(prop),
      }
    );
    console.log(params.lan1); // JavaScript
    console.log(params.lan2); // HTML
    // نبني الصفحة بعد احضار البيانات
    // وذلك من اجل تمرير البيانات لها في حال كانت تعمد عليها
     page1();
  } else {
    page2();
    // وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط
    //إختيارية "?page=2" القيمة
    if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2");
  }
}

علي الكاسر · 25 أغسطس 2022

بتاريخ 52 دقائق مضت قال عمر قره محمد:

لا ليس صعباً لاحظ انك تستطيع تمريره في الوظيفة pushState في الخانة الثالثة :

هل يمكن بهذه الداله والسكربت جعل الرابط بهذا الشكل

xxx.com/user?id=23344

بدلا عن

xxx.com?page=user&id=23344

كيف يمكن تمرير قيم عبر الرابط لحلب محتوى الصفحه

السؤال

علي الكاسر

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

علي الكاسر

عمر قره محمد

علي الكاسر

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية