三、js提交请求加载启动动画、请求完成成功回调、注销加载动画
2024-10-01 03:40:20
1、通过Query post方式进行异步请求方法
jQuery.post(url, [data], [callback], [type])
参数说明:
url:发送请求地址
data:待发送 Key/value 参数
callback:发送成功时回调函数
type:返回内容格式,xml, html, script, json, text, _default
2、要实现的功能描述:js提交请求加载启动动画、请求完成成功回调、注销加载动画
2.1 html页面代码
<td colspan="10" align="right">
<input type="button" value="查询" onclick="seachPage('')">
</td>
<body> function seachPage(pageDirection) {
var levs = getSelectOrglev();
var sbType = $("#sbtype").val();
var jyType = $("#jytype").val();
var custname = $("#custname").val();
var begindate = $("#begindate").val();
var enddate = $("#enddate").val();
if (!checkDate(begindate, enddate)) {
alert('截止期必须大于或等于起始日期');
return false;
} var currentpagevalue = $("#currentpagevalue").val();
initLoading();// 启动加载动画
$.post("dataAuditAction.do?action=findAuditList",
{
orgLevel : levs,
sbtype : sbType,
jytype : jyType,
begindate : begindate,
enddate : enddate,
pageDirection : pageDirection,
currentPage : currentpagevalue,
custName : encodeURI(custname)
},
function(data) {//回调函数
var arr = data[0].auditList;
if (arr.length > 0) {
var html = "";
for ( var i = 0; i < arr.length; i++) {// 更新列表
var dataBean = arr[i];
html += "<tr><td><input type='radio' name='reportId' value='" + dataBean.dataId + "'/></td>";
html += "<td align='center'>" + dataBean.finishDate + " </td>";
html += "<td align='center'><input type='button' value='查看' onclick=searchAudit('auditAction.do?action=auditDetail&insurCode="+dataBean.dataId+"')>" + " </td></tr>";
}
//
var allsize = data[0].allSize;
var currentpage = data[0].currentpage;
cleartable(0);// 清空表格
$("#tablelist").append(html);
hideLoading();// 取消动画
$("#allSize").append(data[0].allSize);
$("#currentpage").append((parseInt(data[0].currentpage) + parseInt(1)));
changePage(allsize, currentpage);// 更新翻页
$("#currentpagevalue").val(currentpage);
} else
cleartable(0);
hideLoading();// 取消动画
}, "json");
}
//1、对日期值进行比较
function checkDate(beginDate, endDate) {
if (beginDate != '' && endDate != '') {
if (endDate >= beginDate)
return true;
else
return false;
} else
return true;
} //2、开启动画
function initLoading(){
var loadDiv = '<div id="loading" class="ol_loading">加载中····</div>';
$('body').append(loadDiv);
$.blockUI({fadeIn:1000,fadeOut:700,message:$('#loading'),overlayCSS:{backgroundColor:'#CECEC6',opacity:'0.2'}});
}
//3、注销动画
function hideLoading(){
$.unblockUI();
} //4、类选择器
.td-c{
background-color:#c4d6ee;
border-right:1px solid #3f79a3;
border-bottom:1px solid #3f79a3;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
font-size: 13px;
color:#004f79;
} <from>
<table id="tablelist" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td align="center" class="td-c">
<font style="font-family: 宋体 ;font-size: 14px;">选择</font>
</td>
<td align="center" class="td-c">
编号
</td>
<td align="center" class="td-c">
操作
</td>
</tr>
</table>
</from>
<div align="right">
当前第<label class="page" id="currentpage" ></label>页/<label class="page" id="allSize" ></label>页
<label id="first" style="display: inline;">首页 前一页</label>
<span id="first1" style="display: none;">
<a style="display: inline" onclick="javascript:seachPage('first')" href="##" class="a1">首页</a>
<a onclick="javascript:seachPage('previous')" href="##" class="a1">前一页</a>
</span> <label id="last" style="display: inline">后一页 末页</label>
<span id="last1" style="display: none;">
<a onclick="javascript:seachPage('next')" href="##" class="a1">后一页</a>
<a onclick="javascript:seachPage('last')" href="##" class="a1">末页</a>
</span>
<input id="currentpagevalue" type="hidden" value="0">
</div>
</body>
2.2 java查询代码
List auditList = kyDataAuditService.getAuditAllDataList(map, paper, currentPage, pageDirection, 10);
map.put("auditList", auditList);
map.put("currentpage", String.valueOf(paper.getCurrentpage()));
map.put("allSize", String.valueOf(paper.getAllSize()));
response.getWriter().write(JSONArray.fromObject(map).toString());
response.getWriter().flush();
response.getWriter().close();
return null;
最新文章
- Get Jenkins job build queue length
- membership 启用 roleManager 抛出异常:未能加载文件或程序集MySql.Web
- Day Tips:ForceDeleteSite
- 适用于jquery1.11.1的ajaxfileupload.js
- C#实现Combobox自动匹配字符
- sp_addlinkedserver的一些操作
- MySql命令行命令和SQL语句
- webdynpro MESSGAE
- iis10 HTTP 错误 500.19 - Internal Server Error
- 【Beta阶段】第二次scrum meeting
- Java基础学习笔记十三 常用API之正则表达式、Date、DateFormat、Calendar
- SpringCloud学习之sleuth&;zipkin【二】
- python中MetaClass的一些用法
- 重新编译安装swoole支持OpenSSL
- PS脚本博客
- JS学习笔记2_面向对象
- spring scope 作用域
- Mac svn使用学习-1-简介
- 【刷题】BZOJ 4195 [Noi2015]程序自动分析
- CasperJS API介绍
热门文章
- ASP.NET Core搭建多层网站架构【12-xUnit单元测试之集成测试】
- Centos7 虚拟环境安装Django 出现ImproperlyConfigured(&#39;SQLite 3.8.3 or later is required (found %s).&#39; %Database.sqlite_version)错误
- redis场景分析的很到位
- Python中Numpy.nonzero()函数
- redis是单进程数据库,多用户排队对统一数据进行访问,不存在并发访问生产的线程安全问题
- Python学习第二十课——自定property and classmethod
- Python笔记3
- java编译问题之Description Resource Path Location Type Java compiler level does not match the version of
- maven设置jdk版本
- php 基础 语句include和require的区别是什么?为避免多次包含同一文件,可用(?)语句代替它们?