نحوه به روز رسانی محتوای صفحه وب بر اساس پارامترهای URL
انتشار: تیر 01، 1403
بروزرسانی: 25 خرداد 1404

نحوه به روز رسانی محتوای صفحه وب بر اساس پارامترهای URL


URL (Uniform Resource Locator) آدرس یک صفحه وب در اینترنت است. علاوه بر اینکه فقط به یک صفحه اشاره می کنند، URL ها همچنین می توانند حاوی اطلاعاتی باشند که می توان از آنها برای اصلاح یک صفحه وب استفاده کرد. به عنوان مثال، می توانیم از یک URL صفحه برای اسکرول کردن به بخش خاصی در صفحه استفاده کنیم یا یک نشانه کاربر برای احراز هویت تنظیم کنیم.

در این آموزش، نحوه استفاده از URL ها برای به روز رسانی محتوای یک صفحه وب را بررسی خواهیم کرد. به طور خاص، ما به دنبال استفاده از پارامترهای URL برای تغییر صفحه با استفاده از شماره صفحه و فیلترهای اعمال شده خواهیم بود.

کمی درباره پارامترهای URL

پارامترهای URL اطلاعات اضافی هستند که به انتهای URL اضافه می شوند و می توان از آنها برای انتقال داده ها در URL استفاده کرد.

پارامترهای URL به ویژه در صفحاتی که داده های زیادی را نمایش می دهند مفید هستند زیرا به کاربر اجازه می دهد تا داده های صفحه را به روش دلخواه خود حفظ کند. ذخیره داده ها در URL ها همچنین اجازه می دهد تا پیوندهای خاصی برای ارائه یک تجربه شخصی برای کاربر ارسال شود.

برای ذخیره شماره صفحه به عنوان پارامتر URL، از آموزش قبلی در مورد صفحه بندی استفاده می کنیم:

در آموزش صفحه بندی، بر اساس شماره صفحه ای که کاربر روی آن کلیک کند، عناصر جدیدی را به صفحه اضافه کردیم. محتوای صفحه با استفاده از جاوا اسکریپت به روز شد، بنابراین تغییرات صفحه بر ساختار URL تأثیری نداشت. با این حال، این بدان معناست که هیچ راهی برای پیگیری صفحه ای که کاربر در حال حاضر از آن بازدید می کند وجود ندارد. به عنوان مثال، اگر کاربری در حال مرور صفحه 4 بود و تصمیم داشت صفحه را به روز کند، به صفحه 1 بازگردانده می شد.

بنابراین در این آموزش، اسکریپت صفحه بندی را به روزرسانی می کنیم تا از پارامتر URL برای ذخیره صفحه فعلی استفاده کند و سپس از آن مقدار پارامتر برای نمایش محتوای صفحه ای که باید نمایش داده شود استفاده می کنیم.

از آنجایی که ما با URL ها کار می کنیم، نسخه آزمایشی به بهترین وجه در یک مرورگر واقعی با استفاده از این پیوند مشاهده می شود https://tutsplus.github.io/jemima-tutorials/page-params.html

به روز رسانی پارامترهای URL

ابتدا، اجازه دهید یک تابع بنویسیم تا وقتی روی شماره صفحه کلیک می شود، ساختار URL را به روز کند. برای به روز رسانی URL صفحه، ابتدا باید URL فعلی را دریافت کنیم. ما می توانیم این کار را با استفاده از window.location متغیر.

1
const currentUrl = new URL(window.location)

این URL() سیonstructor رشته window.location را به یک شی URL تبدیل می کند که می توانیم آن را به روز کنیم.

هنگامی که شی URL را داشته باشیم، می توانیم استفاده کنیم set() روش در URL searchParams برای به روز رسانی پارامترها. این set() متد پارامترهای نام و مقدار را می پذیرد و آنها را در URL رمزگذاری می کند.

1
currentUrl.searchParams.set(\'page\', pageNumber)
شی URL با SearchParams به روز شده

سپس می خواهیم URL واقعی را در نوار آدرس به روز کنیم. ما همچنین می خواهیم URL به روز شده ما رفتار پیش فرض معمول مرورگر را تقلید کند، به عنوان مثال اگر کاربر از دکمه بازگشت استفاده می کند، باید به صفحه قبلی که روی آن کلیک کرده است بازگردانده شود و اگر روی دکمه refresh کلیک کند باید همان صفحه را ببیند.

ما می توانیم با استفاده از آن به این مهم برسیم location.assign - این روش وضعیت تاریخچه مرورگر را به روز می کند و صفحه را با URL مرورگر به روز شده بارگیری می کند.

1
location.assign(currentUrl)

برای اطلاعات بیشتر در مورد روش های مختلف به روز رسانی URL ها با استفاده از جاوا اسکریپت، این مقاله در مورد نحوه تغییر URL در جاوا اسکریپت: تغییر مسیر را بررسی کنید.

تابع URL تمام شده ما به صورت زیر است:

1
const updatePageParams = (pageNumber) => {
2
  const currentUrl = new URL(window.location)
3
  currentUrl.searchParams.set(\'page\', pageNumber)
4
  location.assign(currentUrl)
5
}

ما می توانیم این تابع را به کنترل کننده کلیک دکمه های صفحه بندی منتقل کنیم تا هر بار که روی دکمه ای کلیک می شود، پارامتر صفحه به روزرسانی می شود:

1
const setCurrentPage = (currentPage) => {
2
  updatePageParams(currentPage);
3
  ...
4
};

این setCurrentPage تابع زمانی فراخوانی می شود که دکمه های صفحه بندی کلیک می شوند، بنابراین پارامترهای URL هر بار به روز می شوند.

به روز رسانی محتوا بر اساس پارامترها

اکنون URL خود را دریافت کرده ایم تا هر زمان که صفحه تغییر می کند به روز شود، باید تابعی بنویسیم تا در واقع صفحه مناسب را بر اساس مقدار URL نمایش دهد.

در آموزش صفحه بندی، یک متغیر کلی currentPage تعریف کردیم که مسئول حفظ وضعیت فعلی صفحه بود، بنابراین این مقداری است که بر اساس پارامترها به روزرسانی می کنیم. متغیر currentPage را به طور پیش فرض روی ۱ قرار می دهیم.

سپس، شی URL صفحه فعلی را دریافت کرده و از آن استفاده می کنیم get() روشی برای بازیابی پارامتر مورد نیاز.

1
const currentUrl = new URL(window.location)
2
const page = currentUrl.searchParams.get(\'page\')

اگر URL حاوی یک عبارت جستجوی صفحه باشد، متغیر فعلی فعلی خود را به مقدار صفحه در URL به روز می کنیم. این همان چیزی است که تابع تمام شده به نظر می رسد:

1
const getPageParams = () => {
2
  const currentUrl = new URL(window.location)
3
  const page = currentUrl.searchParams.get(\'page\')
4

5
  if (!page) {
6
    return
7
  }
8
  
9
  currentPage = Number(page)
10
}

ما باید این تابع را هر زمان که صفحه دوباره بارگیری می شود فراخوانی کنیم تا بتوانیم این کار را با استفاده از شنونده رویداد انجام دهیم:

1
window.addEventListener("load", () => {
2
    getPageParams();
3
    setCurrentPage(currentPage);
4
}

اکنون وقتی صفحه بارگیری می شود، متغیر currentPage به مقدار URL به روز می شود یا اگر مقدار URL وجود نداشته باشد به صورت 1 باقی می ماند.

با این حال، از آنجایی که ما در حال بارگیری مجدد صفحه با به روز رسانی URL در هر زمان هستیم setCurrentPage() فراخوانی می شود، ما باید شرطی را برای جلوگیری از گرفتار شدن صفحه در یک حلقه قرار دهیم.

1
const setCurrentPage = (currentPage, onload = false) => {
2
  if (!onload) {
3
    updatePageParams(currentPage);
4
  }
5
}

ما یک را اضافه می کنیم onload پارامتر با مقدار پیش فرض false به setCurrentPage() روش و فقط در صورت بروز رسانی URL صفحه onload پارامتر نادرست است در مرحله بعد، عملکرد را در شنونده رویداد به روز می کنیم:

1
window.addEventListener("load", () => {
2
    getPageParams();
3
    setCurrentPage(currentPage, true);
4
}

و با آن ما با موفقیت توانستیم محتوای صفحه را با استفاده از URL تغییر دهیم.

افزودن چند پارامتر به URL

با این حال، در موقعیت های واقعی، ساختارهای URL پیچیده تر از آن هستند. ممکن است چندین پارامتر به یک URL متصل شوند، مانند زیر:

بیایید نگاهی بیندازیم که چگونه می توانیم چندین پرس وجو را با استفاده از آموزش دیگری به یک URL ارسال کنیم:

نسخه آزمایشی نهایی را می توانید در اینجا مشاهده کنید https://tutsplus.github.io/jemima-tutorials/filter-params.html و کد کامل را می توانید در اینجا مشاهده کنید https://github.com/tutsplus/jemima-tutorials/blob/ main/filter-params.html

ما ویژگی چند فیلتری را به روزرسانی می کنیم تا فیلترهای انتخابی را به URL منتقل کنیم و همچنین صفحه را هنگام بارگیری مجدد براساس فیلترهای موجود در URL فیلتر کنیم.

برای این ویژگی، ما از append() روش به جای set() روش. این set() متد یک کلید را با مقدار ارسال شده جایگزین می کند در حالی که the append() متد یک نمونه جدید از جفت شدن ارزش کلید در URL ایجاد می کند.

1
currentUrl.append(\'key1\', \'value1\')
2
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1
3

4
currentUrl.append(\'key1\', \'value2\')
5
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2
6

7
currentUrl.set(\'key1\', \'value3\')
8
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value3

تغییر دیگر نسبت به روش قبلی این است که به جای به روز رسانی تاریخچه وضعیت و بارگیری مجدد صفحه، فقط URL را بدون بارگیری مجدد جایگزین می کنیم. از آنجایی که ما چندین فیلتر را انتخاب می کنیم و تماس های ناهمگام برای واکشی داده ها برقرار می کنیم، اگر هر بار که URL در حال به روزرسانی بود، صفحه را دوباره بارگیری کنیم، برای عملکرد بد خواهد بود.

در این مورد، به جای استفاده از location.assign، استفاده خواهیم کرد history.replaceState() بجای. این history.replaceState() روش به ما اجازه می دهد تا URL را در نوار آدرس بدون نیاز به بارگذاری مجدد صفحه تغییر دهیم. همچنین URL به روز شده را در تاریخچه ذخیره نمی کند، بنابراین اگر کاربر دکمه بازگشت را فشار دهد، به حالت فیلتر قبلی منتقل نمی شود.

این replaceState() روش سه پارامتر را می پذیرد: data، unused و url. پارامتر اصلی مورد نیاز ما url است زیرا در آنجا می توانیم URL به روز شده خود را ارسال کنیم تا دو پارامتر دیگر null شوند.

تابع URL به روز شده ما اکنون به شکل زیر است:

1
const updateFilterParams = (filter, value) => {
2
  const currentUrl = new URL(window.location)
3
  currentUrl.searchParams.append(filter, value)
4
  history.replaceState({}, \'\', currentUrl)
5
}

حذف پارامترها از URL

عملکرد دیگری که باید اضافه کنیم حذف پارامترها از URL در زمانی که فیلتری انتخاب نشده است است. ما می توانیم این کار را با استفاده از delete() روش.

1
const removeFilterParams = (filter, value) => {
2
  const currentUrl = new URL(window.location)
3
  currentUrl.searchParams.delete(filter, value)
4
  history.replaceState({}, \'\', currentUrl)
5
}

متد delete() دو پارامتر نام و مقدار را می پذیرد. اگر مقداری ارائه نشود، روش حذف تمام نمونه های آن نام را از URL حذف می کند.

1
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2&key1=value3
2

3
currentUrl.delete(\'key1\', \'value2\')
4
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value3
5

6
currentUrl.delete(\'key1\')
7
// https://jemimaabu.github.io/tutorials/filter-params.html

در مرحله بعد می توانیم این دو تابع را به کنترل کننده رویداد کلیک دکمه فیلتر منتقل کنیم:

1
const handleButtonClick = (e, key, param) => {
2
  const button = e.target;
3
  const buttonState = button.getAttribute("data-state");
4
  if (buttonState == "inactive") {
5
    updateFilterParams(key, param);
6
  } else {
7
    removeFilterParams(key, param);
8
  }
9
};

بنابراین اگر ابتدا روی دکمه کلیک شود، URL با فیلتر انتخاب شده به روز می شود اما اگر دکمه انتخاب نشده باشد، پارامتر از URL حذف می شود.

دریافت چندین پارامتر در یک URL

در مرحله بعد می خواهیم محتوای صفحه را بر اساس پارامترهای URL به روز کنیم. ما باید دکمه های فیلتر را به روزرسانی کنیم تا با فیلترهای URL مطابقت داشته باشد و سپس دکمه روی صفحه را فیلتر کنیم.

هنگام بازیابی چندین پارامتر، از عبارت استفاده می کنیم getAll() متد، که آرایه ای از تمام مقادیر اختصاص داده شده به آن کلید در URL را برمی گرداند.

1
// https://jemimaabu.github.io/tutorials/filter-params.html?key1=value1&key1=value2&key1=value3
2

3
currentUrl.getAll(\'key1\')
4
// (\'value1\', \'value2\', \'value3\')

تابع ایجاد فیلتر اکنون به شکل زیر است:

1
const createFilter = (key, param) => {
2
  const currentUrl = new URL(window.location)
3
  const filterKey = currentUrl.searchParams.getAll(key)
4
  if (filterKey.includes(param)) {
5
    filterButton.setAttribute("data-state", "active");
6
  } else {
7
    filterButton.setAttribute("data-state", "inactive");
8
  }
9
};

در مرحله بعد، باید پارامترهای URL را واکشی کنیم و از آنها برای به روز رسانی داده های نمایش داده شده در صفحه استفاده کنیم. در آموزش ویژگی چند فیلتر، ما یک تابع handleFilterPosts() تعریف کردیم که برای به روز رسانی صفحه بر اساس فیلترهای URL استفاده می کنیم.

همچنین می توانیم قبل از فراخوانی تابع، با استفاده از URL بررسی کنیم که آیا URL حاوی پارامترهایی است یا خیر size ویژگی:

1
const getFilterParams = () => {
2
  const currentUrl = new URL(window.location)
3

4
  if (currentUrl.searchParams.size <= 0) {
5
    return
6
  }
7

8
  currentUrl.searchParams.forEach((value, key) => {
9
    currentFilters(key).push(value)
10
  });
11

12
  handleFilterPosts(currentFilters);
13
}

ما تماس خواهیم گرفت getFilterParams() در درخواست واکشی ما عمل می کند، بنابراین صفحه با فیلترهای انتخابی به محض دریافت داده ها به روز می شود. در یک برنامه در مقیاس بزرگتر، فیلتر به احتمال زیاد سمت سرور مدیریت می شود، بنابراین ما فقط باید فیلترها را به عنوان پارامتر در درخواست واکشی ارسال کنیم.

1
fetch(
2
  \'https://...\'
3
).then(async (response) => {
4
  ...
5
  getFilterParams()
6
});

و این تمام چیزی است که ما نیاز داریم. اکنون می توانیم محتوای صفحه را بر اساس URL ها به روز و اصلاح کنیم!


منبع: https://webdesign.tutsplus.com/update-webpage-content-based-on-url-parameters--cms-108803t
نویسنده: تیم تحریریه روحانی نژاد