Question

感谢您的关注，我有以下脚本更新了一系列下拉框，根据用户以前的答案填充。数据来自SQL表。我想知道如何在加载数据时为每个下拉列表添加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>

干杯，乙

Answer 1

除了图像，您可以禁用“选择”并将单个“选项”与加载消息放在一起。你在XHR电话会议之前这样做。

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

获得数据后，请用实际数据替换此“选项”，然后删除属性“已禁用”。

视觉上没问题，用户无需猜测。

Answer 2

我认为您可以选择选项中的图像，但我太确定了。不要引用我的话。

尽管如此，它应该只是一个onChange JavaScript函数，用一个加载图像替换下一个select元素，同时查询数据库中的选项。当AJAX检索选项时，用select字段替换加载图像，并循环遍历AJAX响应，并为从数据库中检索的每个选项添加option标记。

如上所述，像jQuery这样的库使得编写这样的函数变得更容易，但为此你需要从头开始编写JavaScript的良好知识。

将ajax加载gif添加到脚本中

2 个答案: