Почему не работает функция Ajax?

Question

[PageUp]

GET запрос в консоли видно со всеми новыми параметрами, включая и ajax=true.
В нем заголовок, содержимое новой страницы, код ответа ОК 200.
Сообщений об ошибках в консоли тоже нет.
Но в браузере контент не обновляется.
Если сделать логирование, то из сообщений приходит только первое here1, что идет до вызова основной функции.
Все остальные сообщения в консоли не появляются.
До этого писал более примитивную функцию обновления контента, она криво косо, но работала. Там через время глюки с кэшированием истории возникали. Тут функция уже доработанная с учетом истории, но почему-то не хочет работать.
В чем может быть проблема?
Помогите, кто хорошо разбирается в AJAX.

<script>
        $(document).on("click", "a", function(evt) {
          evt.preventDefault();

          var redirect_url = $(this).attr('href');
          console.log("here1");
          $.ajax({
            'url': $(this).attr('href'),
            cache: false,
            data: {
              ajax: true
            },
            dataType: "json",
            success: function(json) {
              console.log("here");
              if (json.redirect) {
                if (json.load_html) {
                  // Если доступен API истории  
                  if (!(typeof history.pushState === 'undefined')) {
                    history.pushState({
                        url: redirect_url,
                        title: document.title
                      },
                      document.title, // Можно также использовать json.title для установки заголовка предыдущей страницы на сервере
                      redirect_url
                    );
                  }
                  console.log("3");
                  document.open();
                  document.write(json.html);
                  document.close();
                } else {
                  console.log("2");
                  window.location = redirect_url;
                }
              } else {
                console.log("1");
                $('#content').html(json.message);
              }
              console.log(json.html);
            },
          });
          return false; //что бы не выполнять переход дефолтный

        });
      </script>

PS.
Может ли ошибка быть в сессии, которая передается в ссылках?: r='.$r.'&'.SID.''
JSON возвращает конец ссылки как: r=88&&ajax=true&_=1674977127135
Номер сессии всегда передается в коде, но он не виден в адресной строке.
А здесь JSON с номером сессии.
Концовки ссылок с GET параметрами в json, из консоли:

&r=88&&ajax=true&_=1674977127137
&r=88&&ajax=true&_=1674977127138
&r=88&&ajax=true&_=1674977127139	
&r=88&&ajax=true&_=1674977127140

Comments

[Danny Arty]

А почему бы тут не указать так?

$.ajax({
            url: redirect_url,  // было 'url': $(this).attr('href')
            cache: false,

И хотелось бы увидеть код обработчика. И еще не хватает метода error для обработки ошибок

[PageUp]

Danny Arty, поменял на url: redirect_url, не помогло.
Да и по сути url: redirect_url, имеет это же значение, тут просто прямая строка поменяна на переменную со значением этой строки.

Answer 1

[Сергей delphinpro]

В нем заголовок, содержимое новой страницы, код ответа ОК 200.

Должно быть не содержимое, а json.
Вы кроме success() добавьте метод error() в обработчик, и выводите его сообщения ошибок тоже.
То есть вы указали что в ответ должен прийти json dataType: "json",, а приходит обычный html-текст. Jquery спотыкается при попытке распарсить ответ как json и кидает ошибку. Метод success при этом не вызывается.

Comments

[PageUp]

А куда это добавить? Я просто в Ajax да и в принципе Javascript совсем новичок. Буквально вторая моя функция на этом языке, которую я пытаюсь внедрить в силу обстоятельств, что вынудили

[Сергей delphinpro]

PageUp, что добавить? обработчик error?
Такие вещи всегда можно посмотреть в документации https://api.jquery.com/jquery.ajax/

$.ajax({
    url: $(this).attr('href'),
    cache: false,
    data: {
        ajax: true
    },
    dataType: "json",
    success: function(json) {
        console.log("here");
        // ...
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR, textStatus, errorThrown);
    }
});

[PageUp]

Сергей delphinpro, какая-то синтаксическая ошибка по всей видимости

'parsererror' SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at parse (<anonymous>)
    at jquery-3.6.3.min.js:2:79897
    at l (jquery-3.6.3.min.js:2:80014)
    at XMLHttpRequest.<anonymous> (jquery-3.6.3.min.js:2:82782)

[Сергей delphinpro]

PageUp, Это именно то, о чем я вам написал выше. Ответ должен возвращаться в json формате, а не простым html, раз уж вы запрашиваете json.
Нужно поправить серверную часть, которая возвращает этот ответ.

[PageUp]

Сергей delphinpro, Серверную, это где-то в .htaccess задается? Или прямо в этом же коде что-то поправить нужно, что бы в JSON передавалось, а не в HTML

[Сергей delphinpro]

PageUp, нет. Это в вашем серверном коде.

[PageUp]

Сергей delphinpro, не, ну так-то да, у меня страница именно что в PHP, но по разметке html. То есть мой индекс начинается прям с

<!doctype html>
<html lang="ru">

А передавать можно только div элементы без этого, верно?
Получается он всю страницу загоняет в json, упирается в тег <!doctype и выдает сразу ошибку.
Выходит, что надо document. изменить на div $('#content')., который идет уже внутри страницы, после <!doctype

Надеюсь правильно понял

[PageUp]

Сергей delphinpro, Не получается. Все перепробовал.
Все document. в скрипте изменил на тег дива $('#content').
Менял расположение этого DIV относительно скрипта.
Если div в коде расположен ниже скрипта, то ссылки работают как обычные.
Если div в коде расположен выше скрипта, то снова выдает эту же ошибку '<', "<!doctype
Как дать понять скрипту, что мне нужно JSON див элемента только менять?

[PageUp]

Короче как я понял, проще просто убрать все упоминания JSON и передавать контент как html

[Сергей delphinpro]

PageUp, вы если хотите принимать json, то php должен отдавать json

echo json_encode([
  'message' => render_template('index.html')
]);

Или принимайте обычный текст. Для этого уберите dataType:'json'
Соответственно у вас в success уже не будет json, а простая html-строка
success: function(html)
и все эти условия будут невернымиif (json.redirect) {

[PageUp]

Сергей delphinpro, Ну я всю страницу передаю, а не строку. PHP страница со множеством всевозможных функций.

[Сергей delphinpro]

PageUp, это и есть одна большая html-строка на выходе =) Окройте исходный код этой страницы. Вы там увидите текст. А текст и есть строка, как тип данных.

[PageUp]

Сергей delphinpro, В общем убрал все лишнее, но ссылки теперь работают как обычные. С перезагрузкой всей страницы. Как же я намучился уже с этим Ajax)) После PHP, на котором я всегда, для меня просто темный лес.

<script>
			$(document).on("click", "a", function(evt) {
				evt.preventDefault();

				var redirect_url = $(this).attr('href');
				$.ajax({
					url: redirect_url,
					cache: false,
					data: {
						ajax: true
					},
					success: function(responce) {
						// Если доступен API истории  
						if (!(typeof history.pushState === 'undefined')) {
							history.pushState({
									url: redirect_url,
									title: document.title
								},
								document.title,
								redirect_url
							);
						}

						$('#content').html(responce);
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log(jqXHR, textStatus, errorThrown);
					}
				});
				return false; //что бы не выполнять переход дефолтный
			});
		</script>

P.S. а не,заработали, просто я забыл что я отключал на время подключение jquery. Когда химичил с JSON
Но этот вариант с HTM ненадежен как я понимаю, я вчера подобныую функцию писал по чути и там прям глюки были
https://qna.habr.com/q/1246578

[PageUp]

Сергей delphinpro, глюки какие то теперь, такие же как и вчера были. Какое то время работает нормально, а потом начинаются перескакивания страниц туда сюда, прыгает с одной на другую очень быстро. Некоторые запросы по 2 раза передаются.