создание контейнера в контейнере с XMLHttpRequest - PullRequest
Новая
       11

создание контейнера в контейнере с XMLHttpRequest

0 голосов
/ 15 апреля 2020

Я хотел бы создать div-контейнер в div-контейнере, используя AJAX, а затем написать «Hello World» во внутренний контейнер. Внешний контейнер не имеет специальной функции. Он просто держит внутренний контейнер. Это мой код:

, извне html: 

<!DOCTYPE html>
<html>

    <head><meta charset="UTF-8"></head>

    <body>

        <div id="outerContainer"></div>        // this is my outer container

        <script>
            function request(){
                var req = new XMLHttpRequest();
                req.open("get", "response.php", true);
                req.onreadystatechange=function(){
                    if(this.readyState == 4 && this.status == 200)
                        document.getElementById('outerContainer').innerHTML = this.responseText; 
                };
                req.send();
            }            
            request();

            // write "Hello World" in the inner container
            document.getElementById('innerContainer').innerHTML = "Hello World";
        </script>

    </body>

</html>

ответ. php

<?php
echo "<div id='innerContainer'>default text</div>";      // put this container inside the outer container
?>

После запуска программы я могу видеть в DOM, что внутренний div-контейнер был создан правильно во внешнем div-контейнере и что его ID - «innerContainer». Но запись «Hello World» во внутреннем контейнере, как я пытался, не работает. Вместо этого его содержимое по-прежнему «текст по умолчанию». Консоль выводит: "index. html: 21 Uncaught TypeError: Невозможно установить свойство 'inner HTML' для null".

Буду признателен за любые предложения или помощь.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Я попробовал то, что сказал в своем комментарии, и это работает.

Когда вы запускаете document.getElementById('innerContainer').innerHTML = "Hello World"; в своем коде, этот элемент, вероятно, не существует (отсюда и ошибка 'null'). Вы должны помнить, что вы делаете асинхронный запрос. Таким образом, другие части кода будут выполняться во время выполнения запроса.

Одним из решений является перемещение текста приветствия внутри ответа. Так что это работает: 

<!DOCTYPE html>
<html>

    <head><meta charset="UTF-8"></head>

    <body>

        <div id="outerContainer"></div>

        <script>
            function request(){
                var req = new XMLHttpRequest();
                req.open("get", "random.php", true);
                req.onreadystatechange=function(){
                    if(this.readyState == 4 && this.status == 200)
                        document.getElementById('outerContainer').innerHTML = this.responseText;

                        document.getElementById('innerContainer').innerHTML = "Hello World";
                };
                req.send();
            }
            request();

        </script>

    </body>

</html>

Как вы можете видеть, Hello World только тогда вставляется, как только элемент действительно существует. Тогда нет шансов на несуществующий div.

1 голос
/ 15 апреля 2020 

<head><meta charset="UTF-8"></head>

<body>

    <div id="outerContainer"></div>        // this is my outer container

    <script>
        function request(){
            var req = new XMLHttpRequest();
            req.open("get", "response.php", true);
            req.onreadystatechange=function(){
              if(this.readyState == 4 && this.status == 200)
                  document.getElementById('outerContainer').innerHTML = this.responseText; 

                  // write "Hello World" in the inner container
                  document.getElementById('innerContainer').innerHTML = "Hello World";
              };
            req.send();
        }            
        request();


    </script>

</body>

...