javascript — отображать изображение загрузки перед выполнением запроса

Question

javascript — отображать изображение загрузки перед выполнением запроса

Если у меня есть код ниже, который занимает некоторое время (около 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>";
?>

0

javascript loading-image php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

я изменил это так … это работает, но не уверен, что это правильно ..

<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>

0