javascript - 为什么 innerHTML 无法通过 AJAX 处理响应文本中的 Html 元素？

Question

注意:请不要标记此问题

我正在尝试在我的网站上使用 php 动态创建博客文章。问题是，当浏览器收到响应时，它无法使用“innerHTML”将 blogPosts 放入我网站上的部分标签内

这是我的 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); 
    }
}

?>

过去两天我一直在尝试解决这个问题，在浏览之后，大多数问题都是“区分大小写”的错误。

Answer 1

正如@Patrick Evans 提到的，您正在使用异步方法，当到达您的innerHTML 行时请求尚未完成

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;
       }
    };