在PHP中的ajax回发加载图标 [英] Loading icon on ajax postback in PHP

问题描述

 此    my   first   php   project 。 我    imlemented   partial   ajax   postback   by  引用    this  文章    PHP   AJAX   MYSQL  来自  W3Schools  
 
 现在，我  am  尝试 到  show   a   loading   gif       partial   loading   start  和  hide   it  何时    partial   loading  完成。 此处      code     I   am  使用    Javascript： 
 
 < pre  lang =Javascript> function showUser1（str）
 {
  if （str ==）
 {
  document  。 getElementById（mems）。 innerHTML   =  我  caanot   fetch：   +  str; 
返回; 
 }  
  else  
 {
  document  。 getElementById（loadgif）。 style 。 visibility =visible; 
  if  （window  .XMLHttpRequest）
 {
  //   IE7 +，Firefox，Chrome，Opera，Safari的代码 
  xmlhttp  =  new  XMLHttpRequest（）; 
} 
  else  
 {
  //  < span class =code-comment> IE6，IE5的代码 
  xmlhttp  =  new  ActiveXObject（Microsoft 。 XMLHTTP）; 
 }  
  xmlhttp 。 onreadystatechange   =  function（）
 {
  if （xmlhttp 。  readyState  ==  4 && < span class =code-leadattribute> xmlhttp 。 status  == 200）
 {
 文档 。 getElementById（outerpicwrapper）。 innerHTML   = ; 
  document  .getElementById（mems）。 innerHTML   =   xmlhttp  .responseText; 
 }  
}; 
  xmlhttp  .open（GET，getmembers  .php？q2 =+ str ，真正）; 
  xmlhttp  .send（）; 
  document  .getElementById（loadgif）。 style  .visibility =hidden; 
 }  
 }  

在第一行的正文中，我写道：

 <   img     id   =  loadgif    src   =  img / loading.gif   

class =loadinggif/>

在CSS文件中，我写了：

。 loadinggif  
 {
 职位 ： 绝对;  
  z-index  ：  200;  
 可见性 ： 隐藏;  
} 

代码工作正常并显示数据但是，没有显示加载gif。我甚至尝试过display：none和display：block代替可见性。请帮助。



我尝试了什么：



可见性：隐藏

display：none

解决方案

您在请求完成之前再次隐藏元素。在 onreadystatechange中的 if 块内移动 visibility =hidden行回调：

 xmlhttp.onreadystatechange =  function （）
 {
  if （xmlhttp.readyState ==  4 && xmlhttp.status ==  200 ）
 {
  document  .getElementById（   outerpicwrapper）。innerHTML =   ; 
  document  .getElementById（  mems).innerHTML = xmlhttp.responseText; 
 
  //  在这里添加： 
  document  .getElementById（  loadgif）。style.visibility =   hidden; 
} 
}; 
 
 xmlhttp.open（  GET，  getmembers.php？q2 = + str， true ）; 
 xmlhttp.send（）; 
 
  //  在此处删除： 
  //   document.getElementById（loadgif）。style.visibility =hidden;  

This is my first php project. I have imlemented partial ajax postback by referring to this article of PHP AJAX MYSQL from W3Schools

Now, I am trying to show a loading gif when the partial loading starts and hide it when the partial loading completes. Here is the code that I am using in Javascript:

<pre lang="Javascript">function showUser1(str) 
    {
        if (str == "") 
        {
            document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
            return;
        }
        else 
        { 
            document.getElementById("loadgif").style.visibility= "visible";
            if (window.XMLHttpRequest) 
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else 
            {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() 
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
                {
                    document.getElementById("outerpicwrapper").innerHTML = "";
                    document.getElementById("mems").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","getmembers.php?q2="+str,true);
            xmlhttp.send();
            document.getElementById("loadgif").style.visibility= "hidden";
        }
    }

In the first line of body, I have written:

<img id="loadgif" src="img/loading.gif" 

class="loadinggif" />
In the CSS file, i have written:

.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}

The code is working fine and shows the data but, loading gif is not shown. I have even tried display:none and display:block in place of visibility. Kindly help.

What I have tried:

visibility: hidden
display: none

解决方案

You're hiding the element again before the request has completed. Move the visibility = "hidden" line inside the if block in the onreadystatechange callback:

xmlhttp.onreadystatechange = function() 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
        document.getElementById("outerpicwrapper").innerHTML = "";
        document.getElementById("mems").innerHTML = xmlhttp.responseText;
        
        // Add here:
        document.getElementById("loadgif").style.visibility= "hidden";
    }
};

xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();

// Remove here:
// document.getElementById("loadgif").style.visibility= "hidden";

这篇关于在PHP中的ajax回发加载图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！