前后台交互经常使用的技术汇总（后台：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=;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=;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="" step="">
        <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=;
       for (var i in json) {
           jsonLength++;
       }
       return jsonLength;
 }

 $.jqPaginator('#pagination', {
     totalPages: ,//分页的总页数;默认0
     visiblePages: ,//最多显示的页码数
     //totalCounts: 10,//分页的总条目数；默认0
     //pageSize: 10,//每一页的条目数；默认0
     currentPage: ,//默认显示第几页
     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) - ;
                 var html = '';
                 //初始化后，动态修改配置,首先获取多少行,算出需要分几页
                 var totalCount = data[jsonLength].totalCount;
                 var pageTotal = Math.floor(totalCount /  + );
                 $('#pagination').jqPaginator('option', {
                     //根据返回的总条目数动态显示页码总数
                     totalPages: pageTotal
                 });
                 //清空table里面的数据
                 $('#tbody').empty();
                 //循环遍历json字符串，然后动态赋值
                 for(var i=;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 = "";
         }
         //日志总数
         //int totalCount = bizLog.getLogCount(searchCond);
         //获取到当前页数
         int currentPageNum = Integer.parseInt(Pagenum);
         //显示的条数
         int pageLength = ;
         //起始值
         int startRow = (currentPageNum-) *  pageLength + ;
         //第几页
         //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();
     }

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

待续......