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

1つの解決策は、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 に答える