Ajax不會取代div內容，除非我用警報暫停腳本

我有一個div，其中包含一個帶有兩個下拉列表的表單。當表單上的提交按鈕被按下時，我有這個javascript函數...Ajax不會取代div內容，除非我用警報暫停腳本

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>

來源

2012-04-17 b10hazard

阿賈克斯： - >異步< - JavaScript和XML – jbabey 2012-04-17 19:15:19

當你通過'FALSE'到'xmlhttp.open'而不是'真'，會發生什麼？因此，在xmlhttp.send（）函數中等待一切等待完成。 – 2012-04-17 19:21:35

在xmlhttp.open上使用false實際上可行！ – b10hazard 2012-04-17 19:29:01

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

來源

2012-04-17 19:25:10 bardiir

幾個要點：

你<形式的onsubmit =>有兩個return語句。只有第一個會起作用。如果您將第一個return語句留在那裏，那麼您的getExt函數應返回false。否則，取出第一個退貨並留下「退貨」。在這裏返回false可以防止表單被提交給服務器。否則，您將表單提交回加載此表單的URL。

對xmlhttp.send（）的調用只是發出請求，它不會阻止腳本的執行。我的猜測是，你期待着別的。「警報」會停止足夠長的腳本，以便服務器處理響應並返回到回調。

來源

2012-04-17 19:22:57

Ajax不會取代div內容，除非我用警報暫停腳本

回答

相關問題