اذهب إلى المحتوى
  • 0

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

علي الكاسر

السؤال

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك استخدام الـ 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 و خواصه اقرأ هذا المقال :

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 


<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");
  }
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

xxx.com/user?id=23344

بدلا عن 

xxx.com?page=user&id=23344

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...