Javascript还原

Question

我会把它简化一点，但我在我的网站上有一些代码，它以一种方式显示了一些元素，假设我有这个：

“我有一个苹果”

​

我使用了一点JavaScript，这样当下拉菜单变成橙色时，p标记就会被写成：

“我有一个桔子”

​

当我在我拥有的表单上单击submit时，新值将被传递到数据库，但页面不会刷新。当我创建一个新条目时，我的初始值是：

“我有一个桔子”

​

但是我想如果它恢复到它的初始状态：

“我有一个苹果”

​

有没有一种方法可以告诉站点，一旦提交完成，就清除所有更改-而不刷新？

这是我的初始JavaScript：

function getRequirements(client_name,location) {        
var strURL="display/getRequirements.php?client_name="+client_name+"&location="+location;
var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('requirementsdiv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

Answer 1

一种解决方案是向发送AJAX请求的按钮添加一个侦听器，然后将变量恢复到其原始状态。

您可以有一个名为revert()的函数，它会根据需要重置所有变量。

例如，使用JQuery...

$('#button').click(function(){
   $.get("myurl",function(data){
     if(data.status == 200){
       //Successful AJAX request.
       revert();
     }
   });
});

Answer 2

DOM本身不记录更改，因此只跟踪当前状态。

您自己的代码可以跟踪页面的初始innerHTML或您所做的更改，在ajax调用之后，您的代码可以将页面恢复到其初始状态。没有javascript函数可以在不重新加载页面的情况下自动执行此操作。

跟踪您修改的每个元素以及它的原始状态对您来说并不困难，然后当您想要恢复页面时，您只需循环浏览该元素列表，并将内容恢复到原来的状态。

这是一个如何实现自己跟踪更改的想法。在更改任何元素之前调用markElement()。当您想要将它们全部还原时，可以调用restoreElements()。

var changedElements = {};
var changedCntr = 1;

// call this right before you change the contents of any element 
// that you want later restored
function markElement(elem) {
    if (!elem.id) {
        elem.id = "_changeCnt" + changedCntr++;
    }
    // if we haven't already saved the state of this element, save it now
    if (!(elem.id in changedElements)) {
        changedElements[elem.id] = elem.innerHTML;
    }
}

// call this when you want to restore all elements
function restoreElements() {
    for (var id in changedElements) {
        var elem = document.getElementById(id);
        elem.innerHTML = changedElements[id];
    }
    changedElements = {};
}

您可能只应该在叶节点(没有子节点的元素)上调用markElement，这样在执行恢复时就不会有丢失任何事件处理程序的风险。

注意:此代码仅处理对元素的更改，而不处理创建/删除，除非在创建/删除子对象之前在父节点上调用markElement。

Answer 3

如果您已将其设置为表单域，则只需重置表单即可。如果不希望用户能够输入，只需添加readonly属性，并可选地设置其样式，使其看起来不再像输入元素。