三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

1、通过Query post方式进行异步请求方法

jQuery.post(url, [data], [callback], [type])
参数说明：
    url:发送请求地址
    data:待发送 Key/value 参数
    callback:发送成功时回调函数
    type:返回内容格式，xml, html, script, json, text, _default

View Code

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>

View Code

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;

View Code

细水长流，打磨濡染，渐趋极致，才是一个人最好的状态。