由於最近我一直在做一個專案、其中用的一個框架絕大部分資料的互動部分幾乎是採用Jquery的ajax完成的，但是由於本人的Jquery學習的不是很好，導致在進行其中的一個採用ajax 進行互動的功能的時候遇到了很多的問題，於是各種百度，但是在百度的過程中，發現絕大部分的博主都是隻展示前臺的ajax 部分的程式碼，要麼就是隻展示後臺的邏輯業務處理部分的程式碼，作為一個新時代的有為青年，本著開源的精神，同時為了減少開發者的開發時間成本，我決定把自己採用ajax 進行ajax 進行資料互動的一個完成的demo 展示出來，希望能幫助像我這樣的開發者。    首先展示的是前臺頁面的程式碼（展示核心程式碼，其他無關緊要的濾過。。。）

    <table class="table table-border table-bordered table-hover table-bg table-sort" id="my">
               <thead>
                    <tr class="text-c">
                         <th width="80">序號</th>
                         <th width="130">使用者名稱</th>
                         <th width="130">IP</th>
                         <th width="130">訪問時間</th>
                         <th width="130">管理員級別</th>
                </tr>
           </thead>
           <tbody>
                   <c:forEach var="login" items="${list}" varStatus="p">
                        <tr class="text-c">
                             <td>${p.index+1}</td>
                             <td>${login.username}</td>
                             <td>${login.ip}</td>
                             <td><fmt:formatDate value="${login.logintime}" type="both"/></td>
                             <c:if test="${login.level eq 1}">
                              <td class="text-l">超級管理員</td>
                             </c:if>
                            <c:if test="${login.level eq 0}">
                              <td class="text-l">管理員</td>
                             </c:if>
                        </tr>
                </c:forEach>
       </tbody>
        </table>

        採用Ajax進行進廳的程式碼：        <div class="text-c"> 日期範圍：
              <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })"                 id="datemin" class="input-text Wdate" style="width:120px;">
                  -
              <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })"                 id="datemax" class="input-text Wdate" style="width:120px;">
              <button type="submit" class="btn btn-success" id="search" name="" onclick="between()"><i class="Hui-                iconfont">&#xe665;</i> 搜記錄</button>
         </div>            ajax部分的程式碼：            /*對後臺返回的時間資料的相關格式化處理*/
  function fmtDate(inputTime) {
       var date = new Date(inputTime);
       var y = date.getFullYear();
       var m = date.getMonth() + 1;
       m = m < 10 ? ('0' + m) : m;
       var d = date.getDate();
       d = d < 10 ? ('0' + d) : d;
       var h = date.getHours();
       h = h < 10 ? ('0' + h) : h;
       var minute = date.getMinutes();
       var second = date.getSeconds();
       minute = minute < 10 ? ('0' + minute) : minute;
       second = second < 10 ? ('0' + second) : second;
       return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
       //return y + '-' + m + '-' + d;
   }
  
   /*管理員顯示的格式化*/
   function checkLevel(level){
    var level = level == '0' ? '管理員' : '超級管理員' ;
    return level;
   }/*指定區間時間內的查詢*/
 function between(){
 var start = $('#datemin').val();
 var end = $('#datemax').val();
 if(start!='' && end!=''){
  $.ajax({
   type: 'POST',
   data:{'start':start,'end':end},
   url: '${pageContext.request.contextPath}/adminlogin/between',
   dataType: 'text',
   success: function(data){
    var obj = eval(data);
    var tbody = $('<tbody></tbody>');//建立tbody標籤
    $(obj).each(function (index){
     var val=obj[index];
     var tr=$('<tr class="text-c" id="cc"></tr>');
     tr.append('<td>'+ (index+1) + '</td>' + '<td>'+ val.username + '</td>' +'<td>'+ val.ip + '</td>' + '<td         class="text-l">'+fmtDate(val.logintime)+'</td>'+'<td class="text-l">'+checkLevel(val.level)+'</td>');
     tbody.append(tr);
     });
     $('#my tbody').replaceWith(tbody);
     $('#cc td').css("text-align","center");//是表格中的資料居中顯示
     var sp = $('<strong id="total">'+obj.length+'</strong>'); //替換掉頁面上的記錄的總數
     $('#total').replaceWith(sp);
   },
   error:function(data) {
    
   },
  });  
 }
} 後臺處理的程式碼： @RequestMapping(value="/between",method=RequestMethod.POST)
 public String findBetweenStartAndEnd(@RequestParam("start") String start,@RequestParam("end") String end,HttpServletResponse response) throws IOException{
  List<AdminLogin> list = adminLoginService.findBetweenStartAndEnd(start,end);
  System.out.println(list.size());
  System.out.println(start+"----"+end);
  String str=JSON.toJSON(list).toString();
  response.setContentType("text/json;charset=utf-8");
  response.getWriter().write(str);
     return null;
 }xxx.mapper.xml中的程式碼：<select id="findBetweenStartAndEnd" parameterType="map" resultMap="loginResultMap">
  select * from admin_login
  <where>
    <if test="start!=null and start!=''">
       <![CDATA[   and DATE_FORMAT(login_time, '%Y-%m-%d')>=  DATE_FORMAT(#{start}, '%Y-%m-%d')  ]]>
  </if>
  <if test="end!=null and end!=''">
       <![CDATA[  and DATE_FORMAT(login_time, '%Y-%m-%d') <= DATE_FORMAT(#{end}, '%Y-%m-%d')    ]]>
  </if>
  </where>
 </select>xxxmapper.java  中的程式碼：//查詢一段時間間隔內的查詢資料
 List<AdminLogin> findBetweenStartAndEnd(Map<String,Object> param);
 service 中的程式碼：//查詢指定指定時間段類的登陸資料
 List<AdminLogin> findBetweenStartAndEnd(String start,String end);
 service.impl中的程式碼：@Override
 public List<AdminLogin> findBetweenStartAndEnd(String start, String end) {
   Map<String,Object> map = new HashMap<String,Object>();
   map.put("start", start);
   map.put("end",end);
   return adminLoginMapper.findBetweenStartAndEnd(map);
 }

這樣，一個基於ssm 並採用ajax 的互動就完成了，希望能版準大家