添加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到脚本

回答

相关问题