0

我有 ajax 代码，我从商店获取产品名称。它工作得很好。但我希望当 ajax 进程继续时它应该显示加载图像。我的 ajax 代码是这样的 我的 onClick 按钮是这样的。

<input type="button"  onclick="getProdList(this.value,this.id)">

我的 getProdList 函数是这样的

function getProdList(id,langid) {
  var xmlHttp=initXMLHTTPRequest();
  //console.log(xmlHttp);
  var str = "value="+id+"&langid="+langid;
  var span="";

  var url = "../php/searchDetails.php?";
    document.getElementById('imgDiv').style.display = 'block';
  xmlHttp.onreadystatechange=function() {
  if(xmlHttp.readyState==4 ) {
    document.getElementById('imgDiv').style.display = 'none';
    span=span+"<ul style='padding-bottom:20px;'><li><b>"+id+"</b></li>";
    var xmldata=xmlHttp.responseXML;
    var xmlObj = xmldata.getElementsByTagName("ProductDetails")[0];
    var menusize=xmlObj.childNodes[0].childNodes[0].childNodes[0].nodeValue;
    var xmlObjlength = xmlObj.childNodes.length;
    for(var i=1;i<xmlObjlength;i++) {
      var ProductName=xmlObj.childNodes[i].childNodes[0].childNodes[0].nodeValue;
      var productId=xmlObj.childNodes[i].childNodes[1].childNodes[0].nodeValue;
      span=span+"<li  style='line-height:20px;display:block;height:20px;list-style:none;border-bottom:1px solid #666666;'><a href='product.php?id_product="+productId+"'><div>"+ProductName+"</div></a></li>"
    }
    if(xmlObjlength==1) {
      document.getElementById("products").innerHTML="";
      document.getElementById("products").innerHTML="Sorry No Products Under this Alphabet";
    }
    else {
      document.getElementById("products").innerHTML="";
      span=span+"</ul>";
      document.getElementById("products").innerHTML=span;
    }
  }
  };
  xmlHttp.open("POST",url,true); 
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", str.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(str);
}

任何帮助和建议都将是非常可观的。谢谢

4

1 回答 1

1 
function getProdList(id,langid) {
  var xmlHttp=initXMLHTTPRequest();
  //console.log(xmlHttp);
  var str = "value="+id+"&langid="+langid;
  var span="";
  var url = "../php/searchDetails.php?";

  document.getElementById('imgDiv').style.display = 'block';

  xmlHttp.onreadystatechange=function() {
  if(xmlHttp.readyState==4 ) {

    document.getElementById('imgDiv').style.display = 'none';

    span=span+"<ul style='padding-bottom:20px;'><li><b>"+id+"</b></li>";
    var xmldata=xmlHttp.responseXML;
    var xmlObj = xmldata.getElementsByTagName("ProductDetails")[0];
    var menusize=xmlObj.childNodes[0].childNodes[0].childNodes[0].nodeValue;
    var xmlObjlength = xmlObj.childNodes.length;
    for(var i=1;i<xmlObjlength;i++) {
      var ProductName=xmlObj.childNodes[i].childNodes[0].childNodes[0].nodeValue;
      var productId=xmlObj.childNodes[i].childNodes[1].childNodes[0].nodeValue;
      span=span+"<li  style='line-height:20px;display:block;height:20px;list-style:none;border-bottom:1px solid #666666;'><a href='product.php?id_product="+productId+"'><div>"+ProductName+"</div></a></li>"
    }
    if(xmlObjlength==1) {
      document.getElementById("products").innerHTML="";
      document.getElementById("products").innerHTML="Sorry No Products Under this Alphabet";
    }
    else {
      document.getElementById("products").innerHTML="";
      span=span+"</ul>";
      document.getElementById("products").innerHTML=span;
    }
  }
  };
  xmlHttp.open("POST",url,true); 
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", str.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(str);
}
于 2013-09-07T04:26:39.703 回答