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

Question

我有一个 html5 web page允许用户在 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 对象进行响应，如果不需要，则退出