Почему innerHTML не работает с HTML-элементами в тексте ответа через AJAX? - PullRequest
Новая
       9

Почему innerHTML не работает с HTML-элементами в тексте ответа через AJAX?

0 голосов
/ 03 ноября 2018

ПРИМЕЧАНИЕ: пожалуйста, не отмечайте этот вопрос [дубликаты]

Я пытаюсь создавать посты в блоге динамически, используя php на моем сайте. Проблема в том, что когда ответ получен браузером, он не может поместить blogPosts в тег раздела на моем веб-сайте, используя «innerHTML»

Вот мой HTML-код: 

<section id="contentSection">
</section>
    <button name="LOAD_MORE_REQUEST" id="LoadMoreButton" onclick="loadContent();" value="loadMoreButton">Load more</button>

Код CSS: 

#contentSection{
                height: 1000px;
                width: 100%;
                background-color: white;
                overflow: scroll;
            }

            .ArticleSection1{
                height: 450px;
                width: 48%;
                float: left;
                margin-left: 1.3%;
                margin-bottom: 30px;
                box-shadow: 0px 0px 10px 4px rgb(180, 180, 180);
            }
            .imageDivArticleSection1{
                height: 50%;
                width: 100%;
                overflow: auto;
            }
            .PreviewTextDiv{
                height: 50%;
                width: 100%;
                overflow: auto;
                background-color: rgba(255, 255, 255, 0.904);
            }
            .ArticleSection1 > div > h1{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 28px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .PreviewTextDiv{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 16px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .ArticleSection1 > div > button{
                width: 20%;
                height: 40px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 100;
                color: black;
                font-size: 16px;
                border: 1px solid deepskyblue;
                background-color: transparent;
                margin-left: 2%;
                margin-top: 20px;
            }

JS код: 

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;
    response = sendLoadContentRequest.responseText;
    document.getElementsByTagName("contentSection").innerHTML = DefaultText +  response;

И код PHP: 

<?php
if(isset($_POST["LOAD_MORE_REQUEST"])){
    loadContentOnPage();
}
else{
    echo("Error");
}


function loadContentOnPage(){
    $response = '
    <section class="ArticleSection1">
    <div class="imageDivArticleSection1"></div>
    <div class="PreviewTextDiv">
        <h1>Code editors to use</h1>
        <br>
        <p>
                Though this is the era of visual presentations than the text or articles but even after that many blog-
                -ers and bloging engines use text teditors but if you are and coding your own blogging website you
                may also need to put one on your website though there are many prewritten texteditors are avilable 
        </p>
        <button>Read more</button>
    </div>
</section>
    ';

    for($a = 0; $a < 4; $a++){
        echo($response); 
    }
}

?>

Я пытаюсь исправить это за последние 2 дня, и после серфинга большинство вопросов были "чувствительными к регистру".

1 Ответ

0 голосов
/ 03 ноября 2018

как упомянул @Patrick Evans. Вы используете асинхронный метод, запрос не завершен к тому времени, как ваша внутренняя строка HTML будет достигнута 

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;

    sendLoadContentRequest.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("contentSection").innerHTML = DefaultText +  responseText;
       }
    };
...