علي الكاسر نشر 25 أغسطس 2022 أرسل تقرير نشر 25 أغسطس 2022 واجهتني مشكله لم اعرف كيف احلها، وهي كيف يمكن تمرير قيم عبر الرابط لحلب محتوى الصفحه مثلا لو لدي صفحة user وبناء على القيمه التي نمررها للصفحه هذه تقوم بارجاع معلومات المستخدم المرر اسمه او عنوان الاي دي خاصته. لقد عملت بعض الحلول ولكنها كانت فيها عيوب وهي عند اعادة تحميل الصفحه تضيع القيمه الممره ويخدث خطاء 1 اقتباس
0 عمر قره محمد نشر 25 أغسطس 2022 أرسل تقرير نشر 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 و خواصه اقرأ هذا المقال : اقتباس
0 علي الكاسر نشر 25 أغسطس 2022 الكاتب أرسل تقرير نشر 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> اقتباس
0 عمر قره محمد نشر 25 أغسطس 2022 أرسل تقرير نشر 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"); } } 1 اقتباس
0 علي الكاسر نشر 25 أغسطس 2022 الكاتب أرسل تقرير نشر 25 أغسطس 2022 بتاريخ 52 دقائق مضت قال عمر قره محمد: لا ليس صعباً لاحظ انك تستطيع تمريره في الوظيفة pushState في الخانة الثالثة : هل يمكن بهذه الداله والسكربت جعل الرابط بهذا الشكل xxx.com/user?id=23344 بدلا عن xxx.com?page=user&id=23344 اقتباس
السؤال
علي الكاسر
واجهتني مشكله لم اعرف كيف احلها، وهي كيف يمكن تمرير قيم عبر الرابط لحلب محتوى الصفحه
مثلا لو لدي صفحة user وبناء على القيمه التي نمررها للصفحه هذه تقوم بارجاع معلومات المستخدم المرر اسمه او عنوان الاي دي خاصته.
لقد عملت بعض الحلول ولكنها كانت فيها عيوب وهي عند اعادة تحميل الصفحه تضيع القيمه الممره ويخدث خطاء
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.