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

Question

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

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

这种方法行得通吗？ 如果是这样，我缺少将html字符串正确传递到PHP页面的东西？ 还是我应该使用其他方法？

Answer 1

ajax是去这里的方法。 如果您不熟悉Ajax，请在Google上搜索并学习它。 任何现代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对象响应，如果不退出

Answer 2

您可以使用类似的方法

1. 用javascript拖放后，显示一个按钮来保存dom。
2. 在按钮上单击事件时，将当前dom放入变量中。
3. 使用ajax将您当前的dom转移到php文件（ajax文件）中。
4. 在ajax文件中，将其保存到数据库中。