使用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操作後保存更改

回答

相關問題