在执行查询前显示加载图像
在执行查询前显示加载图像
提问于 2017-05-17 04:50:08
如果我有下面的代码，这需要一些时间来执行(大约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> </td>";
echo "</tr>";
}
echo "</table>";
?>回答 1
Stack Overflow用户
发布于 2017-05-17 06:27:04
我像this..its一样修改了它，但不确定它是否正确。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44015856
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号