将 HTML DOM 保存到服务器上的文件 - Save HTML DOM to file on server

Save HTML DOM to file on server

本文关键字：文件服务器 HTML DOM 保存 | 更新日期: 2023-09-27

我有一个html5网页，允许用户在div之间拖放对象。在用户移动对象后，我想将当前的 DOM 保存到我的 Web 服务器上的文件中。

我知道我可以使用javascript获取当前的HTML DOM，但是当然，我无法使用javascript保存到服务器上的文件中。所以我考虑将 html 传递给 PHP 页面以执行"保存"功能，但我无法弄清楚如何将 html 传递给 PHP 页面。我尝试将其作为带有 URI 编码的 URL 中的参数发送，但 PHP 页面没有正确从 URL 获取整个字符串。

这种方法应该有效吗？如果是这样，我缺少什么才能将 html 字符串正确传递到 PHP 页面？还是我应该使用其他方法？

ajax 是要走的路。如果你不熟悉ajax，请谷歌一下，好好学习。任何现代 Web 应用程序都需要以某种方式进行 ajax 集成。

以下是使用 javascript 与服务器通信的方法。请注意，我正在使用 JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".draggableDivs").mouseup(function(event){
        var documentStructure = ''; // whatever js you use to get document structure
        var d = {"document_structure": documentStructure};
        $.ajax({
            url: "test.php", //Your url both relative and fixed path will work
            type: "POST", // you need post not get because you are sending a lot of data
            data: d,
            success: function(response) {
                alert('saved');
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});
</script>

然后，您将在服务器上执行PHP并保存数据。完成后，如果需要，您可以使用 json 对象进行响应，如果不是直接退出

你可以使用这样的方法

使用 JavaScript 拖放后，显示一个按钮以保存 DOM。
在按钮上的单击事件中，将当前 DOM 放入变量中。
将您当前的 DOM 传输到 PHP 文件（Ajax 文件）。
在 ajax 文件中，将其保存到数据库中。