Блог

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

 <script type="text/javascript">
$(document).ready(function() {
  $('#testform input[name=date]').datepicker({
    autoHide: true
  });
  $('#testform').submit(send);
});

function send() {
  const data = $(this).serialize();
  $('#output').text("FormData: "   data);
  $.ajax({
    type: "POST",
    url: "receiving_file.php",
    data,
    success: function(data) {
  document.getElementById("PrintData").outerHTML = data;
  document.getElementById("PrintImg").src = data;
    }
  });
  return false;
}
</script>
  

Чтобы отобразить выходные данные, не переходя на другую страницу, я пишу в коде:

 <p id="PrintData">
  

Код в файле receiving_file.php выглядит так:

 <?php
$date = $_POST['date'];
print $date;
?>
  

Проблема в том, что я хочу использовать JavaScript в поступающих данных, и это не работает. Однако, когда я пытаюсь просмотреть исходный код в браузере, я не вижу данных.

У кого-нибудь есть идея, как решить проблему?

Спасибо

Вам нужно предотвратить поведение отправки по умолчанию, иначе ваша форма продолжит отправляться в обычном режиме, и вы не увидите, что часть ajax завершена.

 function send(e) {
    e.preventDefault(); // prevent native submission
    // ... rest of your code as before
}
  

Я немного изменил ваш пример, чтобы заставить его работать в этом jsFiddle. Вам не понадобятся все эти изменения, но при моделировании Ajax-запросов в jsFiddle вы должны опубликовать html, который хотите видеть в ответе.

Если я правильно понял ваш вопрос, проблема должна заключаться в том, что вы пытаетесь изменить outerHTML элемента вместо innerHTML:

 document.getElementById("PrintData").outerHTML = data;
  

тогда как это должно быть:

 document.getElementById("PrintData").innerHTML = data;
  

outerHTML изменяет сам HTML-тег, а не его содержимое.