Question

我已在我的页面中编辑（附加了一些我的div），现在，我需要保存所有这些，当然还要更换旧的。

DOM正文示例：

 <body>
  <div id="save_dom">Save</div>

    <div class="box">111</div>
    <div class="box">222</div>

  <script type="text/javascript" >
    jQuery(document).ready(function($) {

      $(document).on('click', '#save_dom', function(event) {
        $.ajax({
          url: "/saver.php",
          type: "POST",
          data: {
          // chose data to send 
          }, success: function(response) {
          // do things if successed
          }
        });
      });

    });
  </script>

</body>

saver.php文件示例：

<?php
$data = $_GET['data'];
$file = $_SERVER['DOCUMENT_ROOT'];
file_put_contents($file, $data);
echo'Saved!';

这样的东西。

如何通过Ajax，jQuery，PhP保存当前的dom？

Answer 1

我认为将DOM保存在数据库中并不好..

你可以通过获取正文的html来发布带有Ajax的dom

$("body").html();

实施例

jQuery(document).ready(function($) {
  $(document).on('click', '#save_dom', function(event) {
    $.ajax({
      url: "/saver.php",
      type: "POST",
      data: {
      Dom : $("body").html()
      }, success: function(response) {
      // do things if successed
      }
    });
  });

});

Answer 2

您可以使用此代码

将当前页面的html作为字符串

$("html").html()

现在通过ajax传递字符串

<script type="text/javascript" >
    jQuery(document).ready(function($) {

      $(document).on('click', '#save_dom', function(event) {
        $.ajax({
          url: "/saver.php",
          type: "POST",
          data: {
              //Pass data in ajax
              data:$("html").html()
          }, 
          success: function(response) {
          // do things if successed
          }
        });
      });

    });
</script>

问题是，这个字符串将包含所有内容，包括javascript，css等。如果你对html里面的body或者任何其他元素感兴趣，你可以使用

data:$("body").html()

OR

data:$("#wrapperElementId").html()

如何使用Ajax，jQuery和PhP保存当前的DOM？

2 个答案: