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

Question

[PageUp]

Доброго дня.
Задумался над тем, что бы попробовать перевести свою страницу на формат без перезагрузки всей страницы, а лишь ее основы внутри. Все сводится к тому, что делать нужно это на 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 а не только какие-то объекты на ней.

Answer 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);

и того: перехватываем клик по линку, делаем сами запрос аяксом, размещаем результат в нужном блоке.

Comments

[PageUp]

$ ( ... ).on('a',click,function(){
 ...
ajax()
...
return false; //что бы не выполнять переход дефолтный
})

Куда это писать, в head, body на странице вначале? Что за "......" что туда надо вставлять. Ничего, к сожалению, не понял из написанного вами.

Код написан для человека который хорошо знает jQuery Очевидно. Но знай я Jquery я б точно тут вопросов не задавал)
Какое таргетирование, о чем вообще речь идет?
Причем тут вообще Html, если меня интересует не смена структуры страницы, а конкретно все php коды что есть в странице, что бы они запускались, обновлялись, вызывались php функции и т.д.

function(responce)
Что за responce откуда это вообще взялось, это какие-то параметры которые я должен передавать или что?
Просто какие-то куски кода, которые в отрыве от контекста бесполезны. Вы уж извините

[PageUp]

$(document).on("click", "a", function(){
  ajax()
  return false; //что бы не выполнять переход дефолтный
});

$.ajax({
 'url':$(this).attr('href'),
 success:function(responce){

  console.log('Перехват');
  return false; //что бы не выполнять переход дефолтный
}
});

В консоль сообщение мое прилетает. Ссылка все равно активируется простым способом, return false игнорируется.
Ну допустим перехватил я ссылку, а дальше что

[mrStrike]

Понятно. Тогда попробую объяснить как это работает.
Суть в том что для того что бы не перезагружать страницу при попытке перехода по ссылке вы должны предотвратить переход по ссылке, вот модифицировал код, он заставит все ссылки на странице обрабатываться данным блоком кода и отменит переход по ссылке.

$(document).on("click", "a", function(event){
 //тут  ajax()
 event.preventDefault();
//переход не выполнен
});

Что это нам дает? Это дает нам возможность фоном выполнить "переход по ссылке" для того что бы загрузить данные не перезагружая страницу.
Тут мы используем ajax

...
$.ajax({
 'url':$(this).attr('href'),
 success:function(responce){
  console.log('страница', responce);
}
});
...

как мы видим в логе, результат перехода на страницу был загружен в переменную responce и выведен в лог.
Отлично.
Но для чего мы это делали? Для того что бы обновить какой то блок на странице.
Как пример, есть два списка на странице: 1) Страны, 2) Города. Выбирая страну, мы должны видеть города выбранной страны. Города находятся в DIV с id="mycity". Так вот при выборе страны, ajax вернет список городов, но он просто в переменной, тут нужна цель, таргет, куда мы выведем результат и это как раз таки будет блок id="mycity"

...
$("#mycity").html(responce);
...

Тем самым мы вывели данные в блок DIV.
Но это идеальный вариант, так как мы перехватили все ссылки на странице, мы должны понимать что и где мы должны обновлять при выборе разных ссылок. Одни ссылки обновляют к примеру список стран, другие списки национальностей etc.
Для этого мы пометим наши ссылки дополнительным атрибутом назовем его к примеру data-target
получится что то такое

<a href="http://ссылка/country=russian" data-target="mycity">Россия</a>

вот благодаря такому подходу мы можем в скрипте узнать что нам обновлять сделав

...
var target = $(this).attr('data-target');
$(target).html(responce);
...

Ну как то так.

[PageUp]

mrStrike, Ну вот так понятен принцип работы. Но почему-то все равно не пашет, а на первом же этапе при перехвате ссылки и блока с $.ajax() в консоли выдало ошибку :"Uncaught ReferenceError: $ is not defined", а по задумке должно было страницу в консоль выдать, очень странно.

Перенес в файл выше, из индекса, в тот что подключается ДО css и страница и правда в консоль прилетела. Уже какой то прогресс)

Ну вот только она чисто HTML, только данные внешние без бэкэнда по сути. Для того что бы все GET/POST и вложенные функции работали, наверное надо что то дополнительно вкладывать?

[PageUp]

mrStrike, хоть что-то проясняться стало в этой мутной схеме, что и для чего и что конкретно что значит)) Хоть и не работает у меня пока, но направление куда идти хотя бы понятно. А в целом у меня на странице только одно обновляется, мне не нужно обновлять по блокам. Принцип такой что на Index передается GET параметр и в связи с ним Index либо подргружает в себя какой-то модуль, либо на самом индексе дополнительно показывает что нибудь. Мне достаточно просто обновлять Index с новыми Get параметрами которые передаются в ссылке. Все. Большего не нужно)

Написал все как надо и в консоль вся страница прилетает, но почему то ссылки все равно работают так же, как всегда, как обычные ссылки, обновляя всю страницу целиком

[PageUp]

Переместил весь блок Ajax в код по перехвату ссылки, а не только ajax(). Ссылки перестали работать, но при этом и подргузка нового контента не происходит по прежнему)

$(document).on("click", "a", function() {

      $.ajax({
			'url': $(this).attr('href'),
			success: function(responce) {

        $("#article clearfix").html(responce);
			}
		});

      event.preventDefault();
			return false; //что бы не выполнять переход дефолтный
		});

В консоль он страницу новую передает. Ту на которую я бы попал если бы нажал на простую ссылку. Но вот только в браузере он не обновляет контент на эту страницу. Я так понимаю этот respone теперь нужно как то через fetch например передать и вывести?

Добавил

fetch("http://localhost/dk/index.php")
        .then(function(response) {
          // When the page is loaded convert it to text
          return response.text()
        })
        .then(function(html) {
          // Initialize the DOM parser
          var parser = new DOMParser();
          // Parse the text
          var doc = parser.parseFromString(html, "text/html");
          // You can now even select part of that html as you would in the regular DOM 
          // Example:
          var docArticle = doc.querySelector('article').innerHTML;
          console.log(doc);
        })
        .catch(function(err) {
          console.log('Failed to fetch page: ', err);
        });

И снова не работает. В консоль ошибки не выводит, в консоли прям всю страничку загружает, с разметками даже, которые можно развернуть/свернуть. Но вот в окне сайта самого ничего не меняется. Что я делаю не так?

[PageUp]

$(document).on("click", "a", function() {

      $.ajax({
        'url': $(this).attr('href'),
        success: function(responce) {
          $("#content").html(responce);

          $('#content').show(responce);

        }
      });

      event.preventDefault();
      return false; //что бы не выполнять переход дефолтный
    });

Написал так. И добавил в div class="" еще и ID= которого не было. Заработало вроде. Но как то не так все равно. Иногда все начинает глючить и начинается какой-то цикл переходов туда-сюда, вперед назад. Пока не обновишь страницу через F5. Как будто нажимается стрелка назад и вперед много раз в браузере.

Answer 2

[ThunderCat]

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

Это называется SPA (single page application), и не всегда это хорошая идея.

Все сводится к тому, что делать нужно это на Jquery.

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

Но после этого страница не перезагружалась, а просто принимала эти данные и обновляла информацию на всей странице, выводя пользователю эту же страницу, но с новыми результатами?

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

Comments

[PageUp]

Да я почему задумался о таком вообще. Так-то меня это никогда не волновало, страницы сайта открываются моментально, даже загрузку не успеваешь заметить, как папки на ПК листаются, с такой же быстротой. НО. Когда мой сайт работает в качестве приложения встроенным в Iframe Яндекса, там происходит постоянное моргание. Загрузка происходит медленнее, и пока грузится страница в окне Iframe показывается черный цвет, и получается что при нажатии каждой ссылки происходят такие вот моргания через черный цвет, что очень неприятно.