Question

我有一个网页，它回显了我在MYSQL数据库中上传的文件列表（pdfs）。当我上传新文件时，我想自动更新此列表以包含我上传的新文件，而无需刷新整个网页。

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

}

Answer 2

使用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

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

2 个答案: