Question

我会把它愚蠢一点，但我的网站中有一些代码以一种方式显示一些元素，让我说我有这个：

“我有一个苹果”

我正在使用一些JavaScript，以便当下拉列表更改为橙色时，现在会写入p标记：

“我有一个橙色”

当我在表单上单击“提交”时，该新值将传递给数据库，但页面不会刷新。当我去创建一个新条目时，我的初始值是：

“我有一个橙色”

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

“我有一个苹果”

有没有办法告诉网站，一旦提交完成，清除所有更改 - 没有刷新？

这是我最初的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属性，并可选择将其设置为不再像输入元素。

Javascript还原

3 个答案: