AJAX-запрос на отображение контента для пользователя, но не в источнике страницы

Question

В теле документа, давайте назовем его «form.php», у нас есть следующее:

На head у нас есть код JavaScript:

<script>
  function showUser(str) {
    if (str == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
    } else {
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("txtHint").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET", "getchauffeur.php?q=" + str, true);
      xmlhttp.send();
    }
  }
</script>

Мызапрос к базе данных и заполнить раскрывающийся список.Мы переключаем контент, используя (showUser):

<div>
  <? 

  $result = $mysqli -> query("select id, nomchauffeur from  chauffeurs");
  echo "<select name='id'  onchange='showUser(this.value)'>";

  while ($row = $result -> fetch_assoc()) {

      unset($id, $name);
      $id = $row['id'];
      $name = $row['nomchauffeur'];
      echo '<option value="'.$id.
      '">'.$name.
      '</option>';
  }

  ?>

Здесь мы все еще в теле.Мы помещаем содержимое AJAX в div.

  <div id="txtHint"><b>chauffeur info will be listed here...</b> </div>

</div>

Вот наш скрипт, который заполняет поля формы содержимым запроса AJAX:

<script>
  var table = document.getElementById('table');
  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      //rIndex = this.rowIndex;

      document.getElementById("nomchauffeur").value = this.cells[0].innerHTML;
      document.getElementById("prenomchauffeur").value = this.cells[1].innerHTML;
      document.getElementById("agechauffeur").value = this.cells[2].innerHTML;
      document.getElementById("cinchauffeur").value = this.cells[3].innerHTML;

    };
  }
</script>

Теперь вот наш getchauffeur.php:

<?php

  $q = intval($_GET['q']);

  $con = mysqli_connect('localhost','root','','nouveau');
  if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
  }

  mysqli_select_db($con,"ajax");
  $sql="SELECT * FROM chauffeurs WHERE id = '".$q."'";
  $result = mysqli_query($con,$sql);

  echo "<table>
  <tr>
    <th>nom</th>
    <th>prenom</th>
    <th>age</th>
    <th>adresse</th>

  </tr>";
  while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['nomchauffeur'] . "</td>";
    echo "<td>" . $row['prenomchauffeur'] . "</td>";
    echo "<td>" . $row['agechauffeur'] . "</td>";
    echo "<td>" . $row['adressechauffeur'] . "</td>";

    echo "</tr>";
  }
  echo "</table>";
  mysqli_close($con);
?>

Проблема: Все отлично работает, если таблица находится на той же странице.Но здесь AJAX-запрос ограничивает нас для помещения таблицы на другую страницу php (chauffeur.php).Нам нужно заполнить поля формы автоматически, щелкнув строку, отображаемую из выпадающих Change действий.Похоже, что строка, вставленная в таблицу внутри chauffeur.php, не напечатана в html DOM.Когда мы нажимаем на источник просмотра страницы, он отображает только:

<div id="txtHint"><b>chauffeur info will be listed here...</b> </div>

А не содержимое следующих полей:

nomchauffeur  prenomchauffeur  agechauffeur adressechauffeur

Как мы можем получить содержимое строки и заполнить автоматическиформа и где это?

Answer 1

Весь этот javascript AJAX должен быть после вашего HTML div # txtHint.

if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } Также вы можете вернуть только строку вместо всей таблицы.На главной странице создайте таблицу с идентификатором txtHint и вставьте эту строку в ответ.