1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人。
后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的转化或者互相转化,这里我想网上有很多demo。
servlet,或者strtus2或者SpringMvc,在控制层将传递到前台的数据进行封装或者转化为Json,对你的开发十分有帮助。
案例一:当前台申请或者取消按钮的时候,前台根据操作显示对应的提示,非弹出框。
(1):此处使用SpringMvc作为Controller层。
1 @RequestMapping(value="/applyRights")
2 protected void applyRights(final HttpServletRequest request, final HttpServletResponse response) throws Exception{
3
4 ...操作
5 ...操作
6 ...操作
7 ...操作
8 Map<String,Object> map = new HashMap<String,Object>();
9 //这里将前台的两种操作返回的数据分别,保存到map里面。
10 map.put("返回的数据1", 返回的数据1);
11 map.put("返回的数据2", 返回的数据2);
12 //然后使用JsonUtil,这个封装好的Json转化工具类,将map类型转化为Json类型的。Java的map集合类型转化为Json类型。
13 String json = JOSNUtil.object2String(map);
14 //将转化后的数据传递给前台的Ajax的function(data){}的data.
15 response.getWriter().write(json);
16 //刷新操作
17 response.getWriter().flush();
(2):前台使用Jquery进行后台数据处理:Jquery速查网址
1 function 方法名称(参数){
2 ...操作
3 ...操作
4 ...操作
5 //$.post的用法自行查阅
6 $.post(
7 url:发送请求地址,
8 data:待发送 Key/value 参数,
9 function(data){
10 //alert(data);//可以打印传过来的参数
11 //解析后台传过来的map转成的json格式的字符,Java的map集合类型转化为Json类型。
12 //eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
13 var json = eval("(" + data + ")");
14 //直接使用json.key的形式进行获取
15 if(json.返回的数据1!=null){
16 //js循环遍历返回的值,注我的map的value是数组类型的(Object)。
17 for(var i=0;i< json.返回的数据1.length;i++){
18 //获取到这个id是为了动态根据某一个角色id来追加内容。
19 var roleId = json.返回的数据1[i];
20 //动态根据某一个角色id来追加内容。"#"+roleId代表选择器动态变化。
21 $("#"+roleId).append('<span style="color:red;">(申请权限待审批)</span>');
22 //此句话的,查找每个动态id元素的所有类名为 "selected" 的所有同胞元素:
23 //然后attr() 方法设置或返回被选元素的属性值。
24 //然后设置一下checkbox为不选中,且disabled不可选。
25 $("#"+roleId).siblings().attr("checked",false).attr("disabled",true);
26 }
27 }
28 //同上
29 if(json.返回的数据2!=null){
30 for(var i=0;i< json.返回的数据2.length;i++){
31 var roleId= json.返回的数据2[i]
32 $("#"+roleId).append('<span style="color:red;">(申请注销待审批)</span>');
33 $("#"+roleId).siblings().attr("checked",false).attr("disabled",true);
34 }
35 }
36 });
37
38 }
案例二:根据id动态变化传递到后台,ajax异步请求,刷新前台显示内容。
(1):此处使用SpringMvc作为Controller层。
1 //根据角色id获取资源信息/index/getResource
2 //@ResponseBody将返回值转化为json格式响应到客户端
3 @RequestMapping(value="/getResource",method=RequestMethod.POST)
4 public @ResponseBody List<Object> roleGetResource(HttpServletRequest request, HttpServletResponse response)
5 throws Exception{
6 //设置编码格式
7 response.setCharacterEncoding("utf-8");
8
9 //获取到角色的编号
10 String roleId = request.getParameter("roleId");
11
12 //开始根据角色的编号查询其下的权限资源
13 List<Map<String, Object>> resourcebyRole = bizUser.getResourcebyRole(roleId);
14
15 List<Object> list = new LinkedList<Object>();
16 Iterator<Map<String, Object>> it = resourcebyRole.iterator();
17 //只获取到资源的名称,返回到前台即可
18 while(it.hasNext()){
19 Map<String, Object> resMap = it.next();
20 Object object = resMap.get("RES_NAME");
21
22 list.add(object);
23 }
24 //将资源的名称传递到前台的function(data){}的data.
25 return list;
26 }
(2):前台使用Jquery进行后台数据处理:Jquery速查网址
1 $(document).ready(function(){
2 var roleId = null;
3 //获取到所有的角色RoleId
4 $(".roleId").each(function(){
5 //当鼠标移动到角色名称,触发事件,鼠标移入效果
6 $(this).mouseover(function(){
7 //鼠标点击效果,触发事件,鼠标移入效果
8 //$(this).click(function(){
9 //此句话获取到该span的id属性的值。
10 roleId = $(this).attr("id");
11 //alert(roleId);
12 //调用ajax异步请求,获取角色下面的资源
13 $.ajax({
14 type : "POST",//post类型请求。
15 data : {"roleId":roleId},//将每一次获取到角色id传递到后台。
16 url : "../right/getResource",//请求后台的路径
17 success : function(resourceByRole) {//参数即后台返回的数据。
18 //alert(resourceByRole);//先测试一下返回的数据是否正确
19 //判断是否为空或者为null
20 if(resourceByRole == null || resourceByRole == ""){
21 //然后根据div的class属性进行追加或者显示内容即可。
22 $(".resourceShow").html('<span style="color:red;">此角色下面没有权限</span>');
23 }else{
24 //
25 $(".resourceShow").text(resourceByRole);
26 }
27 },
28 });
29 })
30 });
31 });
案例三:根据jqPaginator分页插件,实现异步动态加载自己的数据,刷新前台显示分页内容。
3:官网就是这个样子,不过github的页面貌似没法显示:http://jqpaginator.keenwon.com/
(1)前台展示,由于项目的原因,前台进行阉割了,必要内容都贴出来了:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jqpaginator分页</title>
6 <link rel="stylesheet" href="../css/bootstrap.min.css">
7 <!--引入必须的插件,毕竟使用别人的插件-->
8 <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script>
9 <script src="../js/bootstrap.min.js" type="text/javascript"></script>
10 <script src="../js/jqPaginator.min.js" type="text/javascript"></script>
11 </head>
12 <body>
13
14
15 <table>
16 <thead>
17 <tr role="row">
18 <th >编号</th>
19 <th>时间</th>
20 <th>IP地址</th>
21 <th>操作对象</th>
22 <th>操作事件</th>
23 <th>结果</th>
24 </tr>
25 </thead>
26 <tbody id="tbody">
27 <%--
28 <c:forEach items="${logList }" var="logList" varStatus="status" begin="0" step="1">
29 <tr class="gradeX">
30 <td class="">${status.count}</td>
31 <td class="sorting_1">${logList.LOG_TIME}</td>
32 <td class="">${logList.LOG_SRC_IP}</td>
33 <td class="">${logList.APP_NAME}</td>
34 <td class="center">${logList.LOG_NAME}</td>
35 <td class="center">${logList.LOG_RESULT_DESC}</td>
36 </tr>
37 </c:forEach>
38 --%>
39 </tbody>
40 </table>
41
42 <!---必须加id="pagination"-->
43 <ul id="pagination" id="pagination2"></ul>
44
45 <!-- 分页操作 -->
46 <script type="text/javascript">
47 function getJsonLength(json){
48 var jsonLength=0;
49 for (var i in json) {
50 jsonLength++;
51 }
52 return jsonLength;
53 }
54
55 $.jqPaginator('#pagination', {
56 totalPages: 5,//分页的总页数;默认0
57 visiblePages: 10,//最多显示的页码数
58 //totalCounts: 10,//分页的总条目数;默认0
59 //pageSize: 10,//每一页的条目数;默认0
60 currentPage: 1,//默认显示第几页
61 wrapper:'<ul class="pagination"></ul>',
62 first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
63 prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
64 page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
65 next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
66 last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
67 onPageChange: function (num) {
68 $.ajax({
69 url: "../log/logList",
70 type: "POST",
71 dataType: 'json',
72 data: {"num": num},
73 success : function(data) {
74 //得到json值
75 var jsonLength = getJsonLength(data) - 1;
76 var html = '';
77 //初始化后,动态修改配置,首先获取多少行,算出需要分几页
78 var totalCount = data[jsonLength].totalCount;
79 var pageTotal = Math.floor(totalCount / 10 + 1);
80 $('#pagination').jqPaginator('option', {
81 //根据返回的总条目数动态显示页码总数
82 totalPages: pageTotal
83 });
84 //清空table里面的数据
85 $('#tbody').empty();
86 //循环遍历json字符串,然后动态赋值
87 for(var i=0;i<jsonLength;i++){
88 var LOG_TIME = data[i].LOG_TIME;
89 var LOG_SRC_IP = data[i].LOG_SRC_IP;
90 var APP_NAME = data[i].APP_NAME;
91 var LOG_NAME = data[i].LOG_NAME;
92 var LOG_RESULT_DESC = data[i].LOG_RESULT_DESC;
93 html += '<tr>' +
94 '<td>' + LOG_TIME + '</td>' +
95 '<td>' + LOG_SRC_IP + '</td>' +
96 '<td>' + APP_NAME + '</td>' +
97 '<td>' + LOG_NAME + '</td>' +
98 '<td>' + LOG_RESULT_DESC + '</td>' +
99 '</tr>';
100 }
101 $('#tbody').append(html);
102 }
103 });
104 }
105 });
106 </script>
107
108
109 </body>
110 </html>
(2)SpringMvc对数据进行处理和控制,由于直接调用别人写好的接口,控制层代码也许不适合你(奇葩的是,项目点击左边的栏目,跳转到一个页面,然后使用ajax异步加载出分页数据。):
JsonUtils工具类,也行不是很适合你,将java的List<Map<key,value>>转化为Json格式的;:
1 public class JOSNUtil {
2
3
4 public static String object2String(Object data) throws IOException {
5 ObjectMapper om = new ObjectMapper();
6 SimpleFilterProvider filterProvider = new SimpleFilterProvider().setFailOnUnknownId(false);
7 om.setFilters(filterProvider);
8 return om.writeValueAsString(data);
9 }
10 /**
11 *
12 * json转换list.
13 * <br>详细说明
14 * @param jsonStr json字符串
15 * @return
16 * @return List<Map<String,Object>> list
17 * @throws
18 * @author slj
19 * @date 2013年12月24日 下午1:08:03
20 */
21 public static List<Map<String, Object>> parseJSON2List(String jsonStr){
22 JSONArray jsonArr = JSONArray.fromObject(jsonStr);
23 List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
24 Iterator<JSONObject> it = jsonArr.iterator();
25 while(it.hasNext()){
26 JSONObject json2 = it.next();
27 list.add(parseJSON2Map(json2.toString()));
28 }
29 return list;
30 }
31
32 /**
33 *
34 * json转换map.
35 * <br>详细说明
36 * @param jsonStr json字符串
37 * @return
38 * @return Map<String,Object> 集合
39 * @throws
40 * @author slj
41 */
42 public static Map<String, Object> parseJSON2Map(String jsonStr){
43 ListOrderedMap map = new ListOrderedMap();
44 //最外层解析
45 JSONObject json = JSONObject.fromObject(jsonStr);
46 for(Object k : json.keySet()){
47 Object v = json.get(k);
48 //如果内层还是数组的话,继续解析
49 if(v instanceof JSONArray){
50 List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
51 Iterator<JSONObject> it = ((JSONArray)v).iterator();
52 while(it.hasNext()){
53 JSONObject json2 = it.next();
54 list.add(parseJSON2Map(json2.toString()));
55 }
56 map.put(k.toString(), list);
57 } else {
58 map.put(k.toString(), v);
59 }
60 }
61 return map;
62 }
63 }
然后写控制层代码,如下所示:
1 @RequestMapping(value="/logList",method=RequestMethod.POST)
2 protected @ResponseBody void getLogTable(final HttpServletRequest request, final HttpServletResponse response)
3 throws Exception {
4 response.setCharacterEncoding("utf-8");
5 //获取到用户的id
6 Map<String,Object> userMap=getLoginUser(request);
7 String userId=String.valueOf(userMap.get(TbUser.USER_ID.name));
8 //封装查询条件
9 Map<String, Object> searchCond = new HashMap<String, Object>();
10 searchCond.put(TbLog.USER_ID.name, userId);
11 List<Map<String, Object>> logList = null;
12
13
14 //日志总数
15 int totalCount = bizLog.getLogCount(searchCond);
16 //获取到第几页,
17 String Pagenum = request.getParameter("num");
18 System.out.println("Pagenum:" + Pagenum);
19 if(Pagenum == null){
20 Pagenum = "0";
21 }
22 //日志总数
23 //int totalCount = bizLog.getLogCount(searchCond);
24 //获取到当前页数
25 int currentPageNum = Integer.parseInt(Pagenum);
26 //显示的条数
27 int pageLength = 10;
28 //起始值
29 int startRow = (currentPageNum-1) * pageLength + 1;
30 //第几页
31 //int totalPage = totalCount / pageLength + 1;
32
33 Map<String, Object> totalCountCond = new HashMap<String, Object>();
34 //判断Session中该值是否为空
35 if (userId != null) {
36 //根据参数查询日志信息,参数2是从第几个开始,即起始值。参数3是每页多少条数据。
37 logList = bizLog.getLogList(searchCond, startRow, pageLength);
38 totalCountCond.put("totalCount", totalCount);//这里封装一下查询的总数,然后传给前台解析出来,设置显示多少页码总数
39 logList.add(totalCountCond);
40 }
41 System.out.println(JOSNUtil.object2String(logList));
42 //转换为JSON格式
43 response.getWriter().write(JOSNUtil.object2String(logList));
44 response.getWriter().flush();
45 response.getWriter().close();
46 }
显示如下,反正吧,都是公司的项目,代码啊,截图啊,都是阉割的,凑活着看吧:
待续......