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

Question

I have an html5 web page that allows users to drag-n-drop objects between divs. After a user has moved objects around, I would like to save the current DOM to a file on my web server.

I know I can get the current HTML DOM using javascript but of course, I cannot save to a file on my server using javascript. So I thought about passing the html to a PHP page to do the "save" function, but I cannot figure out how to get the html passed to a PHP page. I've tried sending it as an argument in the URL with URI encoding, but the PHP page is not properly getting the entire string from the URL.

Should this approach work? If so, what am I missing to get the html string passed correctly to a PHP page? Or should I be using some other method?

Answer 1

ajax is the way to go here. If you are not familiar with ajax, please google it and learn it well. Any modern web app needs to have ajax integration in some way.

Here is how you can use javascript to communicate with the server. Please Note I'm using 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>

on the server you would then do your php and save the data. After you are done you can just respond with a json object if needed, if not just exit