一个完整的采用Jquery的ajax 方法进行前后台交互的案例

由于最近我一直在做一个项目、其中用的一个框架绝大部分数据的交互部分几乎是采用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进行进厅的代码：

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 的交互就完成了，希望能版准大家

一个完整的采用Jquery的ajax 方法进行前后台交互的案例

猜你喜欢