0

2 つのドロップダウン リストを含むフォームを含む div があります。フォームで送信ボタンが押されると、このJavaScript関数があります...

function getExt(cgiScriptName,DivId){

        if ( document.getElementById(dropdown1) != null ){
            var value1 = document.getElementById(dropdown1).value;
        }
        if ( document.getElementById(dropdown2) != null ){
            var value2 = document.getElementById(dropdown2).value;
        }

        var xmlhttp;
        if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }  // code for IE7+, Firefox, Chrome, Opera, Safari
        else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }      // code for IE6, IE5


        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById(DivId).innerHTML=xmlhttp.responseText;
            }
        }

        cgiScriptName = cgiScriptName+"?selectOne="+value1+"&selectTwo="+value2;
        xmlhttp.open("GET",cgiScriptName,true);
        xmlhttp.send();

    // The content of DivId only changes if this if statement exists????  Why?????
        if ( document.getElementById(DivId) != null ){ alert('The Div is present'); }
}

関数が実行され、GET を使用して必要な HTML を取得します。この関数が GET 呼び出しを適切にアセンブルし、CGI スクリプトから適切な HTML を返すことを確認しました。問題は、この HTML が表示されるのは、その if ステートメントがコード内にある場合のみです。そうしないと、ページ全体が空白になります。メイン div には何も含まれていません。なぜこうなった？if ステートメントがこの関数を機能させるのはなぜですか? 以下は、私のウェブページの骨抜きバージョンです...

<div id="main">

<div id="curr_div">
<form onsubmit="return getExt('CGIScript.cgi?','curr_div'); return false;">
<select id="dropdown1">...</select>
<select id="dropdown2">...</select>
<input type="submit" value="Submit"/>
</form>
<table>.....</table>
</div>

</div>
4

2 に答える 2

0

element-id 変数は、おそらくクリアされるか、他のコンテキストによって再利用されます。最終的には、javascript によって内部的に使用される変数です。

それをクロージャーにコピーしてみてください...一方、xmlhttpオブジェクトがクリアされている可能性は十分にあり、それを返して変数に保持してみてください...

ちょうど2つの推測：

function getExt(cgiScriptName,DivId){

        if ( document.getElementById(dropdown1) != null ){
            var value1 = document.getElementById(dropdown1).value;
        }
        if ( document.getElementById(dropdown2) != null ){
            var value2 = document.getElementById(dropdown2).value;
        }

        var xmlhttp;
        if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }  // code for IE7+, Firefox, Chrome, Opera, Safari
        else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }      // code for IE6, IE5

        var localdivid = DivId;
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById(localdivid).innerHTML=xmlhttp.responseText;
            }
        }

        cgiScriptName = cgiScriptName+"?selectOne="+value1+"&selectTwo="+value2;
        xmlhttp.open("GET",cgiScriptName,true);
        xmlhttp.send();

    return xmlhttp;
}
于 2012-04-17T19:25:10.723 に答える
0

いくつかのポイント：

<form onsubmit=> には 2 つの return ステートメントがあります。最初のものだけが機能します。最初の return ステートメントをそのままにしておくと、getExt 関数は false を返すはずです。それ以外の場合は、最初のリターンを取り出し、「return false」のままにします。ここで false を返すと、フォームがサーバーに送信されなくなります。そうしないと、このフォームがロードされた URL にフォームを送信することになります。

xmlhttp.send() の呼び出しは単にリクエストを行うだけで、スクリプトの実行をブロックしません。私の推測では、あなたはそうではないことを期待しています。「アラート」は、応答がサーバーによって処理され、コールバックに返されるのに十分な時間、スクリプトを停止しています。

于 2012-04-17T19:22:57.077 に答える