Как отправить форму на текущую страницу без перезагрузки?

Question

[crack_user]

Имеется вот такой фильтр

Если нажать на кнопку "Применить" выдаются нужные get-параметры на текущую страницу, но страница перезагружается. Как с помощью ajax(или может других технологий) можно отправить эту форму, выдать get-параметры на текущую страницу, без перезагрузки? Искал варианты в гугле, но везде идет отправка на другой файл, была идея конечно передать на тот файл все нужные гет-параметры, а также оставить их и на главной странице, но может быть возможно по иному методу как-то. Да и с отправкой на еще один файл могут прийти проблемы, тот же вывод товаров и тд, долго объяснять, если нужно будет - объясню.

Взять в пример те же популярные магазины - DNS, там также имеется кнопка "Показать" и после нажатия выдаются нужные гет-параметры, но страница не перезагружается, или же тот же мвидео, там также выдаются нужные гет-параметры при нажатия на нужный фильтр, но страница также не перезагружается, как возможно что-то похожее реализовать?

Вот код - https://pastebin.com/gB59DB8a, я бы его и сюда закинул, но я на всякий закинул основную его часть, возможно он вам чем-то поможет, но в принципе можно и не смотреть его

Comments

[Александр Нестеров]

Вот код

Где?

[Ипатьев]

Так вам форму отправить или гет параметры показать? Если второе, то это и надо спрашивать. Причем сразу в гугле.

[crack_user]

Александр Нестеров, Извиняюсь, открыл доступ

[crack_user]

Ипатьев, Отправить форму без перезагрузки, но на основной файл(index.php, где выводятся товары и фильтры), если просто в аякс вписать в url основной файл, то сайт будет дублироваться. Ну, а также можно и не форму отправлять (в случае если нет кнопки "Применить фильтры"), а как-то передавать get-параметры на основной файл, но без перезагрузки страницы (в пример - если нажать на кнопку "Новинки", то сразу же, без нажатия на какие-то кнопки, будут выводиться товары с тэгом "Новинки", но если реализовать это обычным способом через Аякс, то там нужно заюзать еще один файл и уже туда выдавать гет-параметр, но мне нужно, чтобы гет-параметры выдавались основному файлу и также отображались. Если вдруг не понятно, то зайдите на тот же мвидео, и задайте там какие-то фильтры для товаров, в итоге, там в url введутся нужные гет-параметры на основную страницу, без перезагрузки (также если и убрать фильтры, то гет-параметр пропадет без перезагрузки).
Оба этих варианта я гуглил, но в итоге толкового ничего не нашел

[zkrvndm]

Ссылку на страницу дайте, завтра постараюсь отписать пример.

[Ипатьев]

Я не понимаю этот лепет.
У вас в вопросе четко описано два задачи:
1) отправить форму без перезагрузки. Это уже совсем позор, непонятно, как вообще ума хватает такие вопросы на Хабр писать.
2) Поменять текущий урл яваскриптом. Тоже не бином ньютона, в интернете миллион решений.
Вроде обе задачи совершенно примитивные. Сейчас начались какие-то страдания, "сайт будет дублироваться", "другой файл нужен". Какое это все имеет отношение к двум озвученным выше проблемам?

[crack_user]

Ипатьев, Попробую еще раз объяснить.
1) Есть форма, с типом GET. Для заполнения нужных фильтров к товарам
2) Есть кнопка "Применить фильтры"
3) Если на неё нажать, то естественно выдадутся get-параметры и страница будет перезагружена
4) Мне нужно сделать так, чтобы ГЕТ-параметры были выданы на ТЕКУЩУЮ СТРАНИЦУ(index.php), но страница не перезагружалась, но и при этом, нужные товары с фильтрами (их взять как раз из выданных гет-параметров) выводились

Также покажу и на примере фильтра в мвидео.
1) Тут еще не стоит галочка на "Разрешение экрана: 8K"
2) У этих фильтров нет кнопки "Применить фильтры" как у меня, но это без разницы, без неё просто лучше понять будет

3) Далее, я нажимаю на кнопку "8K"

4) И вот, мы видим как добавился GET-параметр, но при этом, страница не перезагрузилась, а осталась прежней, но к ней добавился гет-параметр
5) Идет загрузка вывода нужных товаров с нужными данными т.е 8К разрешение, а затем уже и сам вывод товаров
6) https://www.mvideo.ru/televizory-i-cifrovoe-tv-1/t... - Вот даже ссылка, можете сами потыкать по фильтрам, я надеюсь это поможет в понимание проблемы

Поясню, к чему я написал "другой файл нужен" и тд
1) Если использовать Аякс, который в основном и юзается для подобных решений, то в его параметр "url", нужно указать ссылку на файл обработчик данных
2) Если указать другой файл, не основной, то гет-параметры будут выданы уже ему, а не в адресную строку основной страницы
3) Если указать основную страницу в "url", то сайт будет дублироваться и в итоге Аякс выведет два одинаковых сайта на один экран

И да, я также по сей час гуглю решения другими способами, но также и написал сюда, чтобы узнать, как всё же лучше будет, может через аякс как-то возможно, может что-то ещё. Может я не туда мыслю вообще.
Если вам и после этого не понятно, то извиняюсь за потраченное время, я больше не знаю как на словах объяснить.

[crack_user]

Надим Закиров, Вы про мой сайт или что-то другое?

[Ипатьев]

вы по-моему путаете причину и следствие. с какого-то перепугу у вас гет параметры что-то там загружают. забудьте про них. они чисто для декорации. для красоты.
вам нужно сделать аякс запрос по фильтрам и вывести полученные товары. вот и делайте.
а потом допишете что угодно к гет параметрам.

вы на пустом месте себе проблемы изобретаете.

[Ипатьев]

1) Если использовать Аякс, который в основном и юзается для подобных решений, то в его параметр "url", нужно указать ссылку на файл обработчик данных

И ЧТО? Здесь-то вы в чем проблему нашли?

2) Если указать другой файл, не основной, то гет-параметры будут выданы уже ему, а не в адресную строку основной страницы

Да что ж у вас гет параметры гвоздями прибиты к аякс запросу? Это РАЗНЫЕ запросы. Между ними нет ничего общего. гет параметры выдаете одному файлу, аякс запрос делаете к другому. в чем проблема-то? все равно гет параметры к аяксу отношения не имеют.

3) Если указать основную страницу в "url", то сайт будет дублироваться и в итоге Аякс выведет два одинаковых сайта на один экран

Это я так и не понял. Чушь какая-то. Такое ощущение, что вы не сами аякс запрос своим кодом обрабатываете, а какой-то дядя вам посылает готовый результат, с которым вы ничего сделать не можете.
Кто ВАМ мешает отдать по аякс запросу только те данные, которые показать надо, а не всю страницу?

[crack_user]

Ипатьев, Понял, принял. Не в ту сторону думал, спасибо.

[zkrvndm]

crack_user, а про чей еще? Не видя структура вашего сайта я вам пример не намалюю.

Answer 1

[Сергей Пуговкин]

Смена URL без перезагрузки:
https://developer.mozilla.org/ru/docs/Web/API/Hist...
https://developer.mozilla.org/ru/docs/Web/API/Hist...
Смена контента без перезагрузки:
Старое и сложное: https://developer.mozilla.org/ru/docs/Web/API/XMLH...
Новое и простое: https://developer.mozilla.org/ru/docs/Web/API/Fetc...