如何保存 html body php 的当前状态

Question

我有一个 html 网站 Sortable.js。当用户重新排列列表并单击保存按钮时，我想保存 body 的当前状态。我不希望它保存到本地存储，而是直接保存到托管文件，用新的重新排列的版本替换 body html。

<body>
  <div class='wrapper'>
    <ul class='list'>
      <li class='item' contenteditable='true'>Item 1</li>
      <li class='item' contenteditable='true'>Item 2</li>
      <li class='item' contenteditable='true'>Item 3</li>
    </ul>
    <button class='add-item'>add new item</button>
    <button class='save'>save changes</button>
  </div>
</body>

我相信我要实现的目标非常简单，可以使用 php 和 ajax 来完成，但我找不到我的问题的任何直接答案。

目前只有一个index.php个文件。

安全没问题。

Answer 1

你可以这样...

   <body>
      <div class='wrapper'>
        <ul class='list'>
          <li class='item' contenteditable='true'>Item 1</li>
          <li class='item' contenteditable='true'>Item 2</li>
          <li class='item' contenteditable='true'>Item 3</li>
        </ul>
        <button class='add-item'>add new item</button>
        <button class='save' onclick="saveHTML()">save changes</button>
      </div>
    </body>

Java 脚本

function saveHTML(){
  var currentStateHTML = document.documentElement.innerHTML;
  console.log(currentStateHTML);//For debugging
  $.post("file.php", {type : "save", state : currentStateHTML},
     function(data, status){
        if(status == "success"){
          if(data == "saved"){
            location.reload();//which is index.php itself
          }
          else console.log("error");
        }
     }
  );
}

php 文件

<?php
  if(isset($_POST['type'])){
     if($_POST['type'] == "save"){
        $html = $_POST['state'];
        if(file_put_contents("index.php", $html)){
           echo "saved";
           //The file got updated
        } 
        else "error";
     }
  }
?>

注意：- Updating/Erasing/Appending 到一个文件在你的情况下 html/php 文件是一个复杂而敏感的任务，你可以探索更多关于这个，上面的代码只是一个例子，可能不合适。

建议:-

不要尝试更新包含 php 脚本的文件，为什么。？因为 document.documentElement.innerHTML; 只会让您获得页面的 frontend，这在更新实际后端文件时存在风险。
将 all/updatable/editable 文件 {containing only front end view} 保存在一个单独的文件夹中，并进行相应的更改，然后 saved/changed/reloaded 将这些文件包含到您的页面中。
尽量将前后端脚本分开。

如有任何疑问，请在下方评论。

如何保存 html body php 的当前状态

How to save current state of html body php

html

javascript

php

ajax

jquery-ui-sortable