前后台交互经常使用的技术汇总（后台：Java技术，前台：Js或者Jquery）

1：由于针对特定的前后台交互用到的知识总结，所以不大量贴代码，主要给出思路，方便自己以后脑补和技术总结，当然也希望可以帮助到别人。

后台Json和其他格式转化，之前总结过Json和对象，集合，字符串的转化或者互相转化，这里我想网上有很多demo。

servlet，或者strtus2或者SpringMvc，在控制层将传递到前台的数据进行封装或者转化为Json，对你的开发十分有帮助。

　　案例一：当前台申请或者取消按钮的时候，前台根据操作显示对应的提示，非弹出框。

（1）：此处使用SpringMvc作为Controller层。

@RequestMapping(value="/applyRights")
         protected void applyRights(final HttpServletRequest request, final HttpServletResponse response) throws Exception{
         
            ...操作
            ...操作
            ...操作
            ...操作
         Map<String,Object> map = new HashMap<String,Object>();
         //这里将前台的两种操作返回的数据分别，保存到map里面。
         map.put("返回的数据1", 返回的数据1);
         map.put("返回的数据2", 返回的数据2);
         //然后使用JsonUtil，这个封装好的Json转化工具类，将map类型转化为Json类型的。Java的map集合类型转化为Json类型。
         String json = JOSNUtil.object2String(map);
         //将转化后的数据传递给前台的Ajax的function(data){}的data.
         response.getWriter().write(json);  
         //刷新操作
         response.getWriter().flush();

（2）：前台使用Jquery进行后台数据处理：Jquery速查网址

function 方法名称(参数){
            ...操作
            ...操作
            ...操作
            //$.post的用法自行查阅
            $.post(
                url:发送请求地址,
                data:待发送 Key/value 参数,
                function(data){
                    //alert(data);//可以打印传过来的参数
                    //解析后台传过来的map转成的json格式的字符，Java的map集合类型转化为Json类型。
                    //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
                    var json = eval("(" + data + ")");
                    //直接使用json.key的形式进行获取
                    if(json.返回的数据1!=null){
                        //js循环遍历返回的值，注我的map的value是数组类型的(Object)。
                         for(var i=0;i< json.返回的数据1.length;i++){
                                //获取到这个id是为了动态根据某一个角色id来追加内容。
                                var roleId = json.返回的数据1[i];
                                //动态根据某一个角色id来追加内容。"#"+roleId代表选择器动态变化。
                                $("#"+roleId).append('<span style="color:red;">(申请权限待审批)</span>');
                                //此句话的，查找每个动态id元素的所有类名为 "selected" 的所有同胞元素：
                                //然后attr() 方法设置或返回被选元素的属性值。
                                //然后设置一下checkbox为不选中，且disabled不可选。
                                $("#"+roleId).siblings().attr("checked",false).attr("disabled",true);
                             }
                    }
                    //同上
                    if(json.返回的数据2!=null){
                        for(var i=0;i< json.返回的数据2.length;i++){
                             var roleId= json.返回的数据2[i]
                             $("#"+roleId).append('<span style="color:red;">(申请注销待审批)</span>');
                             $("#"+roleId).siblings().attr("checked",false).attr("disabled",true);                    
                         }
                    }
            });

        }

　　案例二：根据id动态变化传递到后台，ajax异步请求，刷新前台显示内容。

（1）：此处使用SpringMvc作为Controller层。

//根据角色id获取资源信息/index/getResource
        //@ResponseBody将返回值转化为json格式响应到客户端
        @RequestMapping(value="/getResource",method=RequestMethod.POST)
        public @ResponseBody List<Object> roleGetResource(HttpServletRequest request, HttpServletResponse response) 
            throws Exception{
        //设置编码格式
        response.setCharacterEncoding("utf-8");
        
        //获取到角色的编号
        String roleId = request.getParameter("roleId");
        
        //开始根据角色的编号查询其下的权限资源
        List<Map<String, Object>> resourcebyRole = bizUser.getResourcebyRole(roleId);
        
        List<Object> list = new LinkedList<Object>();
        Iterator<Map<String, Object>> it = resourcebyRole.iterator();
        //只获取到资源的名称，返回到前台即可
        while(it.hasNext()){
            Map<String, Object> resMap = it.next();
            Object object = resMap.get("RES_NAME");
            
            list.add(object);
        }
        //将资源的名称传递到前台的function(data){}的data.
        return list;
    }

 （2）：前台使用Jquery进行后台数据处理：Jquery速查网址

$(document).ready(function(){
            var roleId = null;
            //获取到所有的角色RoleId
            $(".roleId").each(function(){
                //当鼠标移动到角色名称,触发事件，鼠标移入效果
                $(this).mouseover(function(){
                //鼠标点击效果,触发事件，鼠标移入效果
                //$(this).click(function(){
                     //此句话获取到该span的id属性的值。
                     roleId = $(this).attr("id");
                     //alert(roleId);
                     //调用ajax异步请求，获取角色下面的资源
                     $.ajax({
                         type : "POST",//post类型请求。
                         data : {"roleId":roleId},//将每一次获取到角色id传递到后台。
                         url : "../right/getResource",//请求后台的路径
                         success : function(resourceByRole) {//参数即后台返回的数据。
                            //alert(resourceByRole);//先测试一下返回的数据是否正确
                            //判断是否为空或者为null
                             if(resourceByRole == null || resourceByRole == ""){
                                //然后根据div的class属性进行追加或者显示内容即可。
                                 $(".resourceShow").html('<span style="color:red;">此角色下面没有权限</span>');
                             }else{
                                //
                                 $(".resourceShow").text(resourceByRole);
                             }
                         },
                     });
                })
            });
        });  

　　案例三：根据jqPaginator分页插件，实现异步动态加载自己的数据，刷新前台显示分页内容。

3：官网就是这个样子，不过github的页面貌似没法显示：http://jqpaginator.keenwon.com/

（1）前台展示，由于项目的原因，前台进行阉割了，必要内容都贴出来了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqpaginator分页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!--引入必须的插件，毕竟使用别人的插件-->
    <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../js/jqPaginator.min.js" type="text/javascript"></script>
</head>
<body>


<table>
    <thead>
        <tr role="row">
            <th >编号</th>    
            <th>时间</th>
            <th>IP地址</th>
            <th>操作对象</th>
            <th>操作事件</th>
            <th>结果</th>
        </tr>
    </thead>
    <tbody id="tbody">
      <%-- 
      <c:forEach items="${logList }" var="logList" varStatus="status" begin="0" step="1">
       <tr class="gradeX">
         <td class="">${status.count}</td> 
         <td class="sorting_1">${logList.LOG_TIME}</td>
         <td class="">${logList.LOG_SRC_IP}</td>
         <td class="">${logList.APP_NAME}</td>
         <td class="center">${logList.LOG_NAME}</td>
         <td class="center">${logList.LOG_RESULT_DESC}</td>
       </tr>
      </c:forEach> 
      --%>
     </tbody>
</table>

<!---必须加id="pagination"-->
<ul id="pagination" id="pagination2"></ul>  

<!-- 分页操作 -->      
<script type="text/javascript">
function getJsonLength(json){
      var jsonLength=0;
      for (var i in json) {
          jsonLength++;
      }
      return jsonLength;
}

$.jqPaginator('#pagination', {
    totalPages: 5,//分页的总页数;默认0 
    visiblePages: 10,//最多显示的页码数  
    //totalCounts: 10,//分页的总条目数；默认0  
    //pageSize: 10,//每一页的条目数；默认0  
    currentPage: 1,//默认显示第几页
    wrapper:'<ul class="pagination"></ul>',
    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
    last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
    onPageChange: function (num) {
        $.ajax({
            url: "../log/logList",  
            type: "POST",  
            dataType: 'json',
            data: {"num": num},
            success : function(data) {
                //得到json值
                var jsonLength = getJsonLength(data) - 1;
                var html = ''; 
                //初始化后，动态修改配置,首先获取多少行,算出需要分几页
                var totalCount = data[jsonLength].totalCount;
                var pageTotal = Math.floor(totalCount / 10 + 1);
                $('#pagination').jqPaginator('option', {
                    //根据返回的总条目数动态显示页码总数
                    totalPages: pageTotal
                }); 
                //清空table里面的数据
                $('#tbody').empty();
                //循环遍历json字符串，然后动态赋值
                for(var i=0;i<jsonLength;i++){
                    var LOG_TIME = data[i].LOG_TIME;
                    var LOG_SRC_IP = data[i].LOG_SRC_IP;
                    var APP_NAME = data[i].APP_NAME;
                    var LOG_NAME = data[i].LOG_NAME;
                    var LOG_RESULT_DESC = data[i].LOG_RESULT_DESC;
                    html += '<tr>' +
                    '<td>' + LOG_TIME + '</td>' +
                    '<td>' + LOG_SRC_IP + '</td>' +
                    '<td>' + APP_NAME + '</td>' +
                    '<td>' + LOG_NAME + '</td>' +
                    '<td>' + LOG_RESULT_DESC + '</td>' +
                    '</tr>';
                }
                $('#tbody').append(html);
            }
        });
    }
});
</script>        


</body>
</html>

（2）SpringMvc对数据进行处理和控制，由于直接调用别人写好的接口，控制层代码也许不适合你（奇葩的是，项目点击左边的栏目，跳转到一个页面，然后使用ajax异步加载出分页数据。）：

JsonUtils工具类，也行不是很适合你，将java的List<Map<key,value>>转化为Json格式的；：

public class JOSNUtil {

    
    public static String object2String(Object data) throws IOException {
        ObjectMapper om = new ObjectMapper();
        SimpleFilterProvider filterProvider = new SimpleFilterProvider().setFailOnUnknownId(false);
        om.setFilters(filterProvider);
        return om.writeValueAsString(data);
    }
     /**
     * 
    * json转换list.
    * <br>详细说明
    * @param jsonStr json字符串
    * @return
    * @return List<Map<String,Object>> list
    * @throws
    * @author slj
    * @date 2013年12月24日 下午1:08:03
     */
    public static List<Map<String, Object>> parseJSON2List(String jsonStr){
        JSONArray jsonArr = JSONArray.fromObject(jsonStr);
        List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
        Iterator<JSONObject> it = jsonArr.iterator();
        while(it.hasNext()){
            JSONObject json2 = it.next();
            list.add(parseJSON2Map(json2.toString()));
        }
        return list;
    }

   /**
    * 
   * json转换map.
   * <br>详细说明
   * @param jsonStr json字符串
   * @return
   * @return Map<String,Object> 集合
   * @throws
   * @author slj
    */
    public static Map<String, Object> parseJSON2Map(String jsonStr){
        ListOrderedMap map = new ListOrderedMap();
        //最外层解析
        JSONObject json = JSONObject.fromObject(jsonStr);
        for(Object k : json.keySet()){
            Object v = json.get(k); 
            //如果内层还是数组的话，继续解析
            if(v instanceof JSONArray){
                List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
                Iterator<JSONObject> it = ((JSONArray)v).iterator();
                while(it.hasNext()){
                    JSONObject json2 = it.next();
                    list.add(parseJSON2Map(json2.toString()));
                }
                map.put(k.toString(), list);
            } else {
                map.put(k.toString(), v);
            }
        }
        return map;
    }
}

然后写控制层代码，如下所示：

@RequestMapping(value="/logList",method=RequestMethod.POST)
    protected @ResponseBody void getLogTable(final HttpServletRequest request, final HttpServletResponse response)
            throws Exception {
        response.setCharacterEncoding("utf-8");
        //获取到用户的id
        Map<String,Object> userMap=getLoginUser(request);
        String userId=String.valueOf(userMap.get(TbUser.USER_ID.name));
        //封装查询条件
        Map<String, Object> searchCond = new HashMap<String, Object>();
        searchCond.put(TbLog.USER_ID.name, userId);
        List<Map<String, Object>> logList = null;  
        
        
        //日志总数
        int totalCount = bizLog.getLogCount(searchCond);
        //获取到第几页,
        String Pagenum = request.getParameter("num");
        System.out.println("Pagenum:" + Pagenum);
        if(Pagenum == null){
            Pagenum = "0";
        }
        //日志总数
        //int totalCount = bizLog.getLogCount(searchCond);
        //获取到当前页数
        int currentPageNum = Integer.parseInt(Pagenum);
        //显示的条数
        int pageLength = 10;
        //起始值
        int startRow = (currentPageNum-1) *  pageLength + 1;
        //第几页
        //int totalPage = totalCount / pageLength + 1;
        
        Map<String, Object> totalCountCond = new HashMap<String, Object>();
        //判断Session中该值是否为空
        if (userId != null) {
            //根据参数查询日志信息，参数2是从第几个开始，即起始值。参数3是每页多少条数据。
            logList = bizLog.getLogList(searchCond, startRow, pageLength);
            totalCountCond.put("totalCount", totalCount);//这里封装一下查询的总数，然后传给前台解析出来，设置显示多少页码总数
            logList.add(totalCountCond);
        }
        System.out.println(JOSNUtil.object2String(logList));
        //转换为JSON格式
        response.getWriter().write(JOSNUtil.object2String(logList));
        response.getWriter().flush();
        response.getWriter().close();
    }

 显示如下，反正吧，都是公司的项目，代码啊，截图啊，都是阉割的，凑活着看吧：

 待续......