0

我会稍微简化一下，但我的网站中有一些代码以一种方式显示一些元素，假设我有这个：

“我有一个苹果”

我正在使用一些 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);
    }       
}
4

3 回答 3

0

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

您可以调用一个函数revert()，根据需要重置所有变量。

例如，使用 JQuery...

$('#button').click(function(){
   $.get("myurl",function(data){
     if(data.status == 200){
       //Successful AJAX request.
       revert();
     }
   });
});
于 2012-04-24T22:49:26.230 回答
0

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。

于 2012-04-24T22:50:07.807 回答
0

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

于 2012-04-24T22:51:13.893 回答