javascript - 如何在不刷新整个页面的情况下更新 HTML 文档中的 php 变量？

Question

我有一个网页可以显示我上传到 MYSQL 数据库中的文件列表 (pdf)。当我上传新文件时，我想自动更新此列表以包含我上传的新文件，而无需刷新整个网页。

这是我的 HTML 代码，它通过变量 $mypdf_list 显示更新后的列表:

 <div id="listwrapper_hook">
    <div id="dynamic_listwrapper"><hr>
        <!--DYNAMIC PDF LIST CONTENT GOES HERE-->
        <?php echo $mypdf_list; ?>
    </div>
</div>

我已尝试换出“dynamic_listwrapper”div，然后通过 javascript 将其替换为新的，希望刷新显示的“mypdf_list”变量。但这并没有奏效。

我的 JavaScript 代码:

 //UPDATE 'Recently Uploaded Files'
    var wrapper_hook = document.getElementById('listwrapper_hook');
    var list_wrap = document.getElementById('dynamic_listwrapper');

    wrapper_hook.removeChild(list_wrap);

    //Add child again to update the '$mypdf_list' 
    wrapper_hook.appendChild(list_wrap);

Answer 1

谢谢大家的建议。 Ajax 调用就是这种方式。这是我在 javascript 中的解决方案(有效):

 // GET REFRESHED '$mypdf_list'
    // AJAX CALL
    var formdata = new FormData();
    formdata.append("update",'refresh');

    // create XMLHttpREquest object
    var xmlhttp = new XMLHttpRequest;

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            // HANDLE RESPONSE HERE
            document.getElementById('dynamic_listwrapper').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("POST", "getMypdf_list.php");
    xmlhttp.send(formdata);

}