使用jquery应用Dom操作后保存更改

我正在使用动态页面。我只是想到，我的页面上的一些DOM元素的文本应该是可编辑的，即按钮，标签和段落等文本。使用jquery应用Dom操作后保存更改

是否有任何方法可以使用JavaScript/jQuery保存被操纵的DOM，这样我的DOM更改保持持久？

注意：我正在使用动态页面而不是静态页面，我知道它是否为静态页面，然后在上下文菜单中将保存为Html很容易。

我不想使用除jQuery以外的任何框架。

来源

2016-03-07 Arif H-Shigri

也许你可以看看http://www.w3schools.com/html/html5_webstorage.asp。如果这不是您所需要的，请提供您正在尝试执行的示例。 –

是的，我也可以使用本地存储，但由于本地存储可以轻松删除，所以更改不会持久。 –

或者您是否可以将HTML字符串保存到您的数据库并从那里呈现... –

您可以按照评论指出的方式在浏览器中保存用户的更改。但只要用户清除缓存，这些更改就会丢失。（https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API）

如果我正确理解你想要做什么，你应该在每次更改后进行一次ajax调用，以便将标签，段落或修改的任何新值保存到数据库中。

您可以用本地JavaScript或使用jQuery做（尽管jQuery的语法更易于阅读：http://api.jquery.com/jquery.ajax/）

来源

2016-03-07 15:57:00 Cithel

以及我所得到的是您希望用户更改页面的内容，一个简单的实现将创建一个函数，记录特定部分的所有更改，然后在保存它通过AJAX发布数据到您的服务器，从而节省了页面状态，

考虑下面的例子

<div class="comment" data-cid="3344"> 
    <div class="comment-text">my comment i want to change</div> 
    <ul> 
     <li class="edit">edit</li> 
     <li class="del">delete</li> 
    </ul> 


</div>

和JS

 $('.edit').click(function(){ 
      var ul = $(this).parent(); 
      var comment = ul.parent(); 
      comment.find(".comment-text").attr("contentEditable","true"); 
      ul.append("<li class="save">save</li>") 

      comment.find('.save').click(function(){ 
        new data = { 
        value:comment.find("comment-text").html(), 
        cid: comment.data("cid") 
        } 


        $.ajax({ 
        type: "POST", 
         url: url, 
         data: data, 
         success: function(returndata){alert(saved)}, 
         dataType: dataType 
        }); 
      }); // save click 
    });

在PHP

<?php 
// check if session 
$conn = mysqli_connect($servername, $username, $password); 

// consider you have a comment active record pattern implemented !! 
$c = new comment; 
comment->load($_POST["cid"]); 
comment->setValue($_POST["value"]); 
comment->save();

现在这是一个简单的，但没有这么颗粒演示，您可以添加所有类型的复杂性，如处理会话，或密钥，或不甚至暴露在前端的cid ..

来源

2016-03-07 16:40:40

使用jquery应用Dom操作后保存更改

回答

相关问题