PageUp
@PageUp
Default

Как сделать ссылку jQuery в PHP коде, который обновит страницу с новыми GET параметрами?

Доброго дня.
Задумался над тем, что бы попробовать перевести свою страницу на формат без перезагрузки всей страницы, а лишь ее основы внутри. Все сводится к тому, что делать нужно это на Jquery.
Но я не пойму таких вещей, как будет работать например переадресация header() в коде, она же все равно будет обновлять всю страницу? Ну это не страшно.
Непонятно вот что, как будет выглядеть ссылка, которая будет вызывать Jquery код. Везде пишут уже просто решение того, как происходит подмена или какие параметры нужно закладывать в ссылку, например:

//В этом случае просто выполнился скрипт
$.get('http://mysite.ru/action.php');

//Параметры можно отправить как в ссылке, так и отдельно
$.get('http://mysite.ru/action.php?param=1');
//или
$.get('http://mysite.ru/action.php', {param: 1});

//а что на счет колбеков?
//они нужны, чтобы выполнить какой-либо код после выполнения запроса
//ну, например, если после успешного запроса пишется "ok" в action.php
$.get('http://mysite.ru/action.php', {param: 1}).done(function(data){
   //data - это аргумент, в который передается содержимое страницы
   if(data=="ok"){
       alert("Сервер всем доволен")
   }
});


Но как это сделать все?
Вот например есть ссылка в PHP коде:
echo'<a href="index.php?g='.$loc.'&amp;r='.$r.'&amp;'.SID.'">'.$loc[0].'</a>'.$k.''.$z.'<br>';


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

Как сделать эту же ссылку в Jquery что бы выглядела так же и передавала все те же данные.
Но после этого страница не перезагружалась, а просто принимала эти данные и обновляла информацию на всей странице, выводя пользователю эту же страницу, но с новыми результатами?
Элементом обновления является почти вся страница Index.php а не только какие-то объекты на ней.
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
@mrStrike
тут нужно иметь ввиду то что нужно указывать какой блок будет обновлен на странице
1) через jQuery вешаем перехват всех < a >
$ ( ... ).on('a',click,function(){
 ...
ajax()
...
return false; //что бы не выполнять переход дефолтный
})


2) формируем ajax запрос правильно
$.ajax({
 'url':$(this).attr('href'),
 success:function(responce){
 ....
вот тут таргетирование
....
}
});

3) таргетирование мы можем как на php возвращать нечто вроде json или как придумаете параметр указывающий какой html dom блок должен получить пришедший html
Либо прямо в ссылке хранить таргет например < a href="http://...." data-target="mydiv">
после чего пришедший ответ :
$('#'+$(this).attr('data-target')).html(responce);

и того: перехватываем клик по линку, делаем сами запрос аяксом, размещаем результат в нужном блоке.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега PHP
{PHP, MySql, HTML, JS, CSS} developer
Задумался над тем, что бы попробовать перевести свою страницу на формат без перезагрузки всей страницы, а лишь ее основы внутри.
Это называется SPA (single page application), и не всегда это хорошая идея.

Все сводится к тому, что делать нужно это на Jquery.
Плохая идея, для этого есть совершенно другие, более подходящие инструменты - react, vue...

Но после этого страница не перезагружалась, а просто принимала эти данные и обновляла информацию на всей странице, выводя пользователю эту же страницу, но с новыми результатами?
В общем случае используют несколько приемов: Урл подменяют с помощью history pushState, запросы отправляют через fetch или средствами фреймворка, бэкенд при этом обычно отдает не хтмл, а json, по сути передавая только нужные данные, из которых фронтенд строит уже нужный хтмл из компонент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы