将 HTML DOM 保存到服务器上的文件

Posted 2023-05-08

【中文标题】将 HTML DOM 保存到服务器上的文件

【英文标题】：Save HTML DOM to file on server

【发布时间】：2016-03-06 20:56:40

【问题描述】：

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

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

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

【问题讨论】：

尝试通过AJAX将页面内容传递给PHP，或者尝试通过POST请求表单提交

【参考方案1】：

ajax 是去这里的方式。如果你对ajax不熟悉，请google一下，好好学习。任何现代网络应用都需要以某种方式集成 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 对象进行响应，如果不只是退出

【讨论】：

谢谢，马克。你的示例代码很棒，我现在已经开始工作了。而且我肯定已经了解了 jquery 和 ajax！

【参考方案2】：

你可以使用像

这样的方法

用javascript拖放后，显示一个按钮来保存dom。 在按钮上的单击事件中，将当前 dom 放入变量中。 使用 ajax 将你当前的 dom 传输到一个 php 文件（ajax 文件）。 在ajax文件中，保存到数据库中。