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

Posted 2023-02-24

【中文标题】如何在不刷新整个页面的情况下更新 HTML 文档中的 php 变量？

【英文标题】：How to update a php variable in a HTML document without refreshing the whole page?

【发布时间】：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 来做到这一点

***.com/questions/27068228/…

【参考方案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);