Question

如果我有下面的代码需要一些时间来执行（大约4-5秒）。如何在查询执行之前显示加载图像，如果查询没有运行显示加载图形，则显示查询结果。

的index.php

<html>
<head>
<script>
function showDate() {

    var str=document.getElementById("mymonth").value;
    var str1=document.getElementById("myyear").value;
  if(str == '' || str1 == ''){
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
                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 (this.readyState==4 && this.status==200) {
                        document.getElementById("txtHint").innerHTML=this.responseText;
                    }
                }
                xmlhttp.open("GET","getdate.php?selectedmonth="+str+"&selectedyear="+str1,true);
                xmlhttp.send();
            }

</script>
</head>
<body>
<form>
            <select name="mymonth" id="mymonth" onchange="showDate()">
 <option value="">Select Month</option>
      <option value="01">January</option>
      <option value="02">February</option>
      <option value="03">Mac</option>
      <option value="04">April</option>
      <option value="05">Mei</option>
      <option value="06">June</option>
      <option value="07">July</option>
      <option value="08">August</option>
      <option value="09">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
      </select>
<select name="myyear" id="myyear" onchange="showDate()">
                <option value="">Select Year</option>
                <option value="2016">2016</option>
                 <option value="2017">2017</option>
            </select>
</form>
<br>
<div id="txtHint"><b>Date group by month/year</b></div>
</body>
</html>

getdate.php

<?php
$selectedmonth = intval($_GET['selectedmonth']);
$selectedyear = intval($_GET['selectedyear']);

$month = "$selectedmonth";
$year = "$selectedyear";

$start_date = "01-".$month."-".$year;
$start_time = strtotime($start_date);

$end_time = strtotime("+1 month", $start_time);

echo "<table border='1'>";

for($i=$start_time; $i<$end_time; $i+=86400)
{
$list = date('d M Y (D)', $i);
echo "<tr><td>";
echo $list;
echo "</td>";

echo "<td>&nbsp;</td>";
echo "</tr>";
}
echo "</table>";
?>

Answer 1

我像这样修改它..工作但不确定它是否正确..

<script>
function showReport() {

    var str=document.getElementById("myyear").value;
    var str1=document.getElementById("mymonth").value;
    var str2=document.getElementById("myuser").value;
 // if (str1=="") {// if nothing is selected from first drop down
  if(str == '' || str1 == '' || str2 == ''){
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
                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 (this.readyState==4 && this.status==200) {
                        document.getElementById("txtHint").innerHTML=this.responseText;
                    }
                    else 
                     {
                        document.getElementById("txtHint").innerHTML="<img src='ajax-loader.gif' border='0' alt='running' />";

                    }
                }


                xmlhttp.open("GET","getreport.php?selectedyear="+str+"&selectedmonth="+str1+"&selecteduser="+str2,true);
                xmlhttp.send();
            }

</script>

在查询执行之前显示加载图像

1 个答案: