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

【问题标题】：How to update a php variable in a HTML document without refreshing the whole page?如何在不刷新整个页面的情况下更新 HTML 文档中的 php 变量？
【发布时间】：2015-08-20 13:04:34
【问题描述】：

我有一个网页，可以显示我上传到 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);

【问题讨论】：

“自动更新”：ajax
你可以使用 Ajax 来做到这一点
stackoverflow.com/questions/27068228/…

标签： javascript php html mysql

【解决方案1】：

使用 ajax。

代码看起来有点像这样：

setInterval(function () {
    var url_to_fetch_pdfs = "www.yourdomain.com/fetch_pdfs.php";
    $.ajax({
        type: "POST",
        url: url_to_fetch_pdfs,
        cache: false,
        success: function(result){
            $("#dynamic_listwrapper").html("<hr>"+result);
        }
    });
}, 60000); // 1 Minute

在您的 PHP 文件中，您将获取所有 pdf 下载，ajax 变量中的 result 将是您的 PHP 获取文件中的 echo。

Ajax Documentation

【讨论】：

OP 标记为javascript，但不是jquery，因此虽然这可能有效，但不一定有帮助。
OP可能不知道jquery，所以他可以概括为javascript。因为他没有提到使用onlyjavascript

【解决方案2】：

感谢大家的所有建议。 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);

}

【讨论】：