查询按钮调用后台数据,如何先显示‘正在查询中.....’然后才在页面上显示数据,如图片 javawebjquery 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 var url = "<%=basePath%>/server/ownPropertyCostsAcn!saveOwnPropertyCostsOrder.action"; var data = "orderTime="+orderTime+"&castleId="+castleId+"&houseId="+houseId; $.ajax({ url : url, type : 'post', dataType : 'json', data:data, timeout : 30000, beforeSend : function() { alert("正在查询中"); }, complete : function() { }, error : function(a, b, c) { $.messager.alert('温馨提示','网络错误或者认证失败,请重试!','info'); }, success : function(data) { } }); datagrid定义 里 加上 属性loadMsg:"数据查询中,请等待……" <#assign s=JspTaglibs["/WEB-INF/taglib/struts-tags.tld"]><#setting number_format="0.####"><@s.include value="/includes/baseInclude.jsp" /><div class="analyseTh"> <div> <div class="grid_3 lable-right" style="margin-left: 15px;"> <label class="form-lbl">时间:</label> </div> <div class="grid_5" id="startTime1"> <input type="text" name="startTime" id="startTime" maxlength="50" readonly value='<@s.date name="startTime" format="yyyy-MM-dd"/>' class="form-txt" style="width: 99%" /> </div> <div class="grid_4 lable-right" style="margin-left:8px;"> <label class="form-lbl">至:</label> </div> <div class="grid_5" id="endTime1"> <input type="text" name="endTime" id="endTime" maxlength="50" readonly value="<@s.date name="endTime" format="yyyy-MM-dd"/>" class="form-txt" style="width: 99%"/> </div> <div class=""> <a id="search" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>查询</span></a> <a id="toExcel" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>导出</span></a> <a id="reload" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>刷新</span></a> </div> </div> <div id="aaa"></div> <table border="0"> <thead> <tr> <th style="width:20%;">区域<strong id="amountTotal"></strong></th> <th style="width:20%;">总用户<strong></strong></th> <th style="width:30%;">登录用户 <strong></strong></th> <th style="width:30%;">0登录用户 <strong></strong></th> </tr> </thead> </table></div><div class="analyseTb"> <table> <tbody> <@s.iterator value="tendencyChartList" var="charList"> <tr> <td align = "center" style="width:20%;">${(statisticsType)!}</td> <td style="width:20%;">${(thisMonthCount)!}</td> <td style="width:30%;">${(thisQuarterCount)!}</td> <td style="width:30%;">${(thisYearCount)!}</td> </tr> </@s.iterator> </tbody> </table></div><script type="text/javascript">$('#startTime').datePicker({ yearRange: '1900:2030', dateFormat: 'yy-mm-dd', maxDate:'+0d', onSelect:function(dateText,inst){ $("#endTime").datepicker("option","minDate",dateText); } });$('#endTime').datePicker({ yearRange: '1900:2030', dateFormat: 'yy-mm-dd' }); $("#search").click(function(){ var startTime=$("#startTime").val(); var endTime=$("#endTime").val(); $.ajax({ async: false, url:"${(path)!}/baseInfo/analyseManage/getAllCountDataByCurrent1.action?orgId="+getCurrentOrgId()+"&type=<@s.property value='#parameters.type[0]'/>&startTime="+startTime+"&endTime="+endTime, success:function(responseData){ $("#newStaffTable").html(responseData); $("#newStaffTable tbody tr:odd").addClass("odd"); $("#startTime").val(startTime); $("#endTime").val(endTime); } }); }); $("#toExcel").click(function(){ var startTime=$("#startTime").val(); var endTime=$("#endTime").val(); var url = "${(path)!}/baseInfo/analyseManage/getAllCountDataByCurrent2.action?orgId="+getCurrentOrgId()+"&type=<@s.property value='#parameters.type[0]'/>&startTime="+startTime+"&endTime="+endTime; window.location.href = url ; }); </script> <div id="resultsShow" class="analyseTb"> <table> <tbody> <@s.iterator value="tendencyChartList" var="charList"> <tr> <td align = "center" style="width:20%;">${(statisticsType)!}</td> <td style="width:20%;">${(thisMonthCount)!}</td> <td style="width:30%;">${(thisQuarterCount)!}</td> <td style="width:30%;">${(thisYearCount)!}</td> </tr> </@s.iterator> </tbody> </table> </div> <div id="inSearching" class="analyseTb" style="display: none;">正在查询中,请稍候...</div>$("#search").click(function(){ $("#resultsShow").css("display","none"); $("#inSearching").css("display","block"); var url = "your request url"; $.ajax( url:url, type:"post", data:"your datas", success:function(){ $("#resultsShow").css("display","block"); }; ); });2楼的beforeSend不知道可不可以,如果可以更简单,我的不太简洁 $("#search").ajaxStart(function(){ $("#inSearching").css("display","block"); }); $("#search").ajaxComplete(function(){ $("#inSearching").css("display","none"); }); 改成这样试试 javascript如何调试错误 高手请进,百分请教个URL附加参数,列出查询结果的问题 用confirm跳转页面JS MySql中主键设为自增量,如何写入? 一个关于div的问题 再请教一个SQL命令 我要通过JAVASCRIPT来改变一个FORM里的元素的值,如何做呢?急。马上给分 如何取弹出窗口的返回值? 一个javascript的小问题 替换回车符的问题 Echarts markline 基准线显示不出来 想在select2.js插件生成可选列表下加一行固定项(+添加)
var data = "orderTime="+orderTime+"&castleId="+castleId+"&houseId="+houseId;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data:data,
timeout : 30000,
beforeSend : function() {
alert("正在查询中");
},
complete : function() {
},
error : function(a, b, c) {
$.messager.alert('温馨提示','网络错误或者认证失败,请重试!','info');
},
success : function(data) {
}
});
loadMsg:"数据查询中,请等待……"
<#setting number_format="0.####">
<@s.include value="/includes/baseInclude.jsp" />
<div class="analyseTh">
<div>
<div class="grid_3 lable-right" style="margin-left: 15px;">
<label class="form-lbl">时间:</label>
</div>
<div class="grid_5" id="startTime1">
<input type="text" name="startTime" id="startTime" maxlength="50" readonly
value='<@s.date name="startTime" format="yyyy-MM-dd"/>' class="form-txt" style="width: 99%" />
</div>
<div class="grid_4 lable-right" style="margin-left:8px;">
<label class="form-lbl">至:</label>
</div>
<div class="grid_5" id="endTime1">
<input type="text" name="endTime" id="endTime" maxlength="50" readonly
value="<@s.date name="endTime" format="yyyy-MM-dd"/>"
class="form-txt" style="width: 99%"/>
</div>
<div class="">
<a id="search" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>查询</span></a>
<a id="toExcel" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>导出</span></a>
<a id="reload" href="javascript:void(0)" class="normalBut" style="margin-left: 10px;margin-top:5px"><span>刷新</span></a>
</div>
</div>
<div id="aaa"></div>
<table border="0">
<thead>
<tr>
<th style="width:20%;">区域<strong id="amountTotal"></strong></th>
<th style="width:20%;">总用户<strong></strong></th>
<th style="width:30%;">登录用户 <strong></strong></th>
<th style="width:30%;">0登录用户 <strong></strong></th>
</tr>
</thead>
</table>
</div>
<div class="analyseTb">
<table>
<tbody>
<@s.iterator value="tendencyChartList" var="charList">
<tr>
<td align = "center" style="width:20%;">${(statisticsType)!}</td>
<td style="width:20%;">${(thisMonthCount)!}</td>
<td style="width:30%;">${(thisQuarterCount)!}</td>
<td style="width:30%;">${(thisYearCount)!}</td>
</tr>
</@s.iterator>
</tbody>
</table>
</div>
<script type="text/javascript">
$('#startTime').datePicker({
yearRange: '1900:2030',
dateFormat: 'yy-mm-dd',
maxDate:'+0d',
onSelect:function(dateText,inst){
$("#endTime").datepicker("option","minDate",dateText);
}
});$('#endTime').datePicker({
yearRange: '1900:2030',
dateFormat: 'yy-mm-dd'
});
$("#search").click(function(){
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
$.ajax({
async: false,
url:"${(path)!}/baseInfo/analyseManage/getAllCountDataByCurrent1.action?orgId="+getCurrentOrgId()+"&type=<@s.property value='#parameters.type[0]'/>&startTime="+startTime+"&endTime="+endTime,
success:function(responseData){
$("#newStaffTable").html(responseData);
$("#newStaffTable tbody tr:odd").addClass("odd");
$("#startTime").val(startTime);
$("#endTime").val(endTime);
}
});
});
$("#toExcel").click(function(){
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
var url = "${(path)!}/baseInfo/analyseManage/getAllCountDataByCurrent2.action?orgId="+getCurrentOrgId()+"&type=<@s.property value='#parameters.type[0]'/>&startTime="+startTime+"&endTime="+endTime;
window.location.href = url ;
});
</script>
<table>
<tbody>
<@s.iterator value="tendencyChartList" var="charList">
<tr>
<td align = "center" style="width:20%;">${(statisticsType)!}</td>
<td style="width:20%;">${(thisMonthCount)!}</td>
<td style="width:30%;">${(thisQuarterCount)!}</td>
<td style="width:30%;">${(thisYearCount)!}</td>
</tr>
</@s.iterator>
</tbody>
</table>
</div>
<div id="inSearching" class="analyseTb" style="display: none;">正在查询中,请稍候...</div>$("#search").click(function(){
$("#resultsShow").css("display","none");
$("#inSearching").css("display","block");
var url = "your request url";
$.ajax(
url:url,
type:"post",
data:"your datas",
success:function(){
$("#resultsShow").css("display","block");
};
);
});
2楼的beforeSend不知道可不可以,如果可以更简单,我的不太简洁
$("#inSearching").css("display","block");
});
$("#search").ajaxComplete(function(){
$("#inSearching").css("display","none");
}); 改成这样试试