Question

我有一个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。问题是只有if语句在代码中时才会显示此HTML。否则整个页面变为空白。主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>

Answer 1

有几点：

您的＆lt; form onsubmit =＆gt;有两个退货声明。只有第一个才有效。如果将第一个return语句留在那里，你的getExt函数应该返回false。否则，取出第一个返回并离开“return false”。这里返回false会阻止表单提交到服务器。否则，您将表单提交回加载此表单的URL。

对xmlhttp.send（）的调用只是发出请求，它不会阻止脚本的执行。我的猜测是你在期待。 “警报”正在停止脚本足够长的时间，以便服务器处理响应并返回到您的回调。

Answer 2

element-id变量可能被某些其他上下文清除或重用。最后，它是javascript内部使用的变量。

尝试将其复制到关闭中...... 另一方面，很有可能xmlhttp对象被清除，尝试返回并在变量中保留它......

只有两个猜测：

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;
}

除非我使用警报暂停脚本，否则Ajax不会替换div内容

2 个答案: