添加ajax加載gif到腳本

感謝您的期待，我有下面的腳本更新了一系列下拉框，根據用戶以前的答案填充。數據來自SQL表格。我想知道如何在數據加載時向每個下拉列表中添加一個Ajax加載gif。我希望這是有道理的，如果沒有請問。添加ajax加載gif到腳本

<script language="javascript"> 
var xmlhttp 

function selectmanu() 
{ 

xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
    { 
    alert ("Your browser does not support XMLHTTP!"); 
    return; 
    } 
document.form1.mtype.style.background = "#FFFFFF" 
var id=document.form1.mtype.value; 


var url="selectmanu.php"; 
url=url+"?id="+id; 
/*url=url+"&sid="+Math.random();*/ 
xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

function stateChanged() 
{ 

if (xmlhttp.readyState==4) 
    { 
    document.getElementById("abc").innerHTML=xmlhttp.responseText; 
    } 
} 

function GetXmlHttpObject() 
{ 
if (window.XMLHttpRequest) 
    { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    return new XMLHttpRequest(); 
    } 
if (window.ActiveXObject) 
    { 
    // code for IE6, IE5 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
return null; 
} 


function selectmodel() 
{ 
xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
    { 
    alert ("Your browser does not support XMLHTTP!"); 
    return; 
    } 
    document.form1.manu.style.background = "#FFFFFF" 
var id=document.form1.manu.value; 
var url="selectmodel.php"; 
url=url+"?id="+id; 
xmlhttp.onreadystatechange=stateChanged1; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

function stateChanged1() 
{ 

if (xmlhttp.readyState==4) 
    { 
    document.getElementById("modspan").innerHTML=xmlhttp.responseText; 
    } 
} 

function validate() 
{ 

if(document.form1.mtype.value=='0') 
{ 
document.form1.mtype.style.background = "#FF0000" 
return false; 
} 
else if(document.form1.manu.value=='0') 
{ 
document.form1.manu.style.background = "#FF0000" 
return false; 
} 
else if(document.form1.model.value=='0') 
{ 
document.form1.model.style.background = "#FF0000" 
return false; 
} 
return true; 
} 
function mset() 
{ 
if(document.form1.model.value!='0') 
{ 
document.form1.model.style.background = "#FFFFFF" 
} 

} 

</script>

乾杯， B.

來源

2010-01-21 Bift

這不是重點，但你知道，使用JS庫等jQuery，你可以簡化上面的JS到幾乎5-10行？ – TuomasR 2010-01-21 10:18:12

我不是 - JS不是我的包 - 我有一個朋友爲我做這個。不過謝謝。你認爲我所問的是可能的嗎？ – Bift 2010-01-21 10:32:52

我認爲你可以有選擇的選擇圖像，但我不太清楚。不要在此引用我。

儘管如此，它應該只是一個具有onChange JavaScript函數的案例，它可以用查詢數據庫中的選項替換下一個select元素。當AJAX檢索到選項時，請用選擇字段替換加載圖像，並循環播放AJAX響應，併爲從數據庫中檢索的每個選項添加option標記。

如上所述，像jQuery這樣的庫使得寫這樣的函數更容易，但爲此，您需要從頭開始編寫JavaScript的豐富知識。

來源

2010-01-21 10:45:24

感謝您的回覆：我上面發佈的所有函數都是使用onChange工作的，有沒有將它們合併到已經完成的函數中的方法？ – Bift 2010-01-21 10:49:07

除了圖像，您可以禁用「選擇」並將一個「選項」與加載消息。你在XHR呼叫之前這樣做。

<select disabled=""> 
    <option>Loading...</option> 
</select>

一旦你得到你的數據，把這個「選項」替換成真正的數據，並刪除屬性「disabled」。

視覺上沒問題，用戶也沒有什麼可猜的。

來源

2010-01-21 11:25:45 Mic

好回答 - 不知道這是如何適合 – Bift 2010-01-21 11:41:49

添加ajax加載gif到腳本

回答

相關問題