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 + "&nbsp;</td>";

                html += "<td align='center'><input type='button' value='查看' onclick=searchAudit('auditAction.do?action=auditDetail&insurCode="+dataBean.dataId+"')>" + "&nbsp;</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;

三、js提交请求加载启动动画、请求完成成功回调、注销加载动画的更多相关文章

  1. sql2008r2,以前好好可以用的,但装了vs2017后,连接不上了,服务也停了,结果手动也 启动不了, 无法加载或初始化请求的服务提供程

    日志: 2017-12-14 12:33:17.53 服务器 A self-generated certificate was successfully loaded for encryption.2 ...

  2. ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  3. 001-ant design pro安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  4. easyui datagrid 加载两次请求，触发两次ajax 请求 问题

    datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"> ...

  5. jQuery:多个AJAX/JSON请求对应单个回调并行加载

    因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...

  6. jQuery Ajax封装（附带加载提示和请求结果提示模版）

    1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charse ...

  7. Swift基础之Demo包含刷新，加载，网络请求，MVC

    Swift中有一个Alamofire第三方是进行网络请求的,它是AFNetworking的作者写的Swift形式,今天先介绍一下,利用pod导入AFNetworking,SVProgressHUD,M ...

  8. 基于TFTP方式加载启动Linux内核

            一.软硬件平台 1.开发板:创龙AM3359核心板,网口采用RMII形式. 2.UBOOT版本:U-Boot-2016.05,采用FDT和DM. 3.交换芯片MARVELL的88E63 ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

随机推荐

  1. PHP的isset(),is_null,empty()你了解了没？

    这几个变量判断函数在PHP开发中用的其实挺多的,而且粗看上去都差不多,但其实还是有不少的区别的,如果搞不清楚,也许就会遗留一些潜在的bug, 包括我自已也遇到过这样的坑,比如有一次我就遇到过用empt ...

  2. C语言笔记 11_头文件&强制类型转换&错误处理&递归

    头文件 头文件是扩展名为 .h 的文件,包含了 C 函数声明和宏定义,被多个源文件中引用共享.有两种类型的头文件:程序员编写的头文件和编译器自带的头文件. 在程序中要使用头文件,需要使用 C 预处理指 ...

  3. 开源沙箱CuckooSandbox 介绍与部署

    1. 介绍 1.1应用  在工作中很多时候需要自己对一些可以程序,可执行文件进行检测,当然我们可以通过VT,微步,等一些开源的平台进行检测.现在我们通过自己搭建的开源的沙箱进行检测.所谓沙箱,是分离运 ...

  4. Spring Boot 2.x 入门前的准备-IntelliJ IDEA 开发工具的安装与使用

    常用的用于开发 spring boot 项目的开发工具有 eclipse 和 IntelliJ IDEA 两种,最近有声音提出 visual code 也开始流行开发 java,而且确实如此, vs ...

  5. Fleck WebSocket使用

    Fleck WebSocket使用 作为笔记存储. 最近公司有这方面的使用需求.在网上查了一些资料后.得到了想要的结果.以下记录摘抄至网上资料. 1.首先,服务端.项目NuGet直接引用Fleck类库 ...

  6. BinaryTree(二叉树)

    我认为二叉树的递归实现体现了递归思想的一些重要性质,如果对递归的理解不够的话,想利用递归来实现是很费劲的(实际上我现在都还有些懵...),虽然会用,但一些地方不能弄清楚原因. 经过几天的学习,看了许多 ...

  7. php虚拟主机配置（ 输入网址 对应 ip地址）

    1.启动http_vhost.conf文件 在httpd-conf中,#virtual hosts 去掉前面的井号 # Includeconf/extra/httpd_vhost.conf 2.配置h ...

  8. Linux 命令中 more、less、head、tail 命令的用法

    more 命令 more 命令,功能类似 cat ,cat 命令是将整个文件的内容从上到下显示在屏幕上. more 命令会一页一页的显示,方便使用者逐页阅读,而最基本的指令就是按空白键(space)往 ...

  9. Python开发：Python运算符

    运算符 1.算数运算: 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 - 两个数相乘或是返 ...

  10. 了解js闭包

    定义:闭包是由函数以及创建该函数的环境组合而成.这个环境包含了这个闭包创建时所能访问的所有局部变量 理解:能够读取其他函数的内部变量的函数,并开辟新的作用域(环境) 例子1 function pare ...