Почему после AJAX запроса к *.php файлу, сервер отправляет текст без html кода?

Question

[Urushi Go]

*.php

<?php
include $_SERVER['DOCUMENT_ROOT'] . '/wordpress/wp-blog-header.php';
$num = $_GET['num'];
$offset = $num * 2 + 1;
query_posts('cat=2&posts_per_page=3&offset=' . $offset);
$answer = '';
while (have_posts()) : the_post();
$answer += '<div class="smallpost"><a href="' . the_permalink() . '" class="header_smallpost">' . the_title() . '</a>
<span class="date">' . the_time(__('j F H:i')) . '</span></div>';
endwhile;
echo $answer;
?>

Ответ: ссылка + заголовок статьи + время (все приходит в одной строчке и без верстки)

JavaScript код:

num = 1;
function loadMore() {
  num += 1;
  if (window.XMLHttpRequest) {
    var xmlhttp = new XMLHttpRequest();
  } else {
    var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xmlhttp.onreadystatechange = function() {
    document.getElementById('smallposts').innerHTML += xmlhttp.responseText;
  }

  xmlhttp.open('GET', '<?php echo get_template_directory_uri(); ?>/loadmore.php?num=' + num, true);
  xmlhttp.send();
}

Answer 1

[Urushi Go]

Нашел несколько ошибок в своем коде. Возможно их описание кому-либо поможет.

Ошибка #1 в JavaScript коде, в обработчике xmlhttp.onreadystatechange:

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById('smallposts').innerHTML += xmlhttp.responseText;
    }
  }

Ошибка #2 в PHP коде. В переменной $answer хранится строка, а значит присоединять к ней нужно знаком ".=", а не"+=":

$answer .= '<div class="smallpost"><a href="' . get_the_permalink() . '" class="header_smallpost">' . get_the_title() . '</a>
<span class="date">' . get_the_time(__('j F H:i')) . '</span></div>';

Ошибка #3, так-же находится в PHP коде. Для возвращение ссылки на пост, заголовка и времени требуется приставка "get_":
get_the_permalink()

Answer 2

[Dmitriy Mozgovoy]

Посмотрите в консоли что отвечает сервер на Ваш запрос. Если все ок - смотрим js
Как минимум обработчик xmlhttp.onreadystatechange неполон.

xhr.onreadystatechange = function () {
   var html, status;
   if (xhr.readyState == 4) {
      if ((status = xhr.status) >= 200 && status < 400) {
           html=xhr.responseText;
           //code
      }else{
           //error status
      }
   }
}

Answer 3

[Grigruss]

Как написано так и отправляется. Никаких тегов в коде php я не вижу, для переменной $answer, а значит и отправляется без них.

Comments

[Urushi Go]

Забыл вставить код в тег ""

[Grigruss]

но ссылка именно как ссылка приходит, или некликабельная?

[Urushi Go]

Григорий: некликабельная. Приходит текст сплошной строчкой (ссылка + заголовок статьи + время)

[Grigruss]

тогда на принимающей стороне надо смотреть. Возможно фильтруются теги, или используется что-то вроде $('body').text(answer) вместо $('body').html(answer) или $('body').append(answer). Здесь .text() обрезает все теги, тогда как .html() и .append() выдают с тегами.

[Urushi Go]

Виталий Инчин: библиотекой jQuery не пользуюсь. Сейчас размещу JavaScript код в вопросе

[Grigruss]

нативный JS я не знаю... однако предполагаю, что xmlhttp.responseText; возвращает именно текстом без тегов... можно попробовать на стороне php прогнать через htmlspecialchars() php.net/manual/ru/function.htmlspecialchars.php , а на стороне JS через .replace() https://javascript.ru/String/replace

[Виталий Инчин ☢]

Urushi Go: попробуйте использовать php.net/manual/ru/function.htmlspecialchars.php