最近在做个类CMS的一个系统,前端展示都OK了,在做后台管理,就是对数据库的增删改查。使用SSH实现功能倒也蛮简单的,只是为了人性化的设计,需要做一些提示机制,比如用户删除了一条数据给个删除成功的提示,添加或者修改一条记录同样给个提示,或者不成功给个原因的弹窗,我所谓的消息就是指这些消息。比如进行一个数据列表管理,增删改成功后都会回到列表,这时最有得有个操作结果的提示啊。
由于是一个人在写后台,为了节省工作量(避免写那些显示错误提示的样式~),我决定全部用js的alert来做这件事,当然用户体验可能稍差,但对于一个后台就没那么多要求啦。在后台管理中,一般是用post请求来进行操作,而post请求是要请求到后台的,前台又需要用到js来展示,这就意味着需要把后台处理请求后的数据再传到前台来。web开发经验不多的我想到了两种思路,一是把post请求全部写成ajax,在跳转页面前显示弹窗,二是把消息存到session里,当跳转页面后显示弹窗。第一种思路会大大增加工作量,并且我们都知道js极不方便调试,所以我果断舍弃了那种做法。
使用session的办法来实现,在post请求处理页面前,将要显示的message放到session里面,然后再跳转页面。后台存放message的方法多样,根据不同的框架有不同的代码,只要定义一个session变量即可,类似于session.setAttribute("message",message),对于前端页面,我写了个messag.jsp的页面,在所有前端jsp页面的底部include了这个页面,在底部include是想让页面载入完后在弹窗,就不会出现一个空白页面弹窗了,这样感觉体验要好一点。如果你是拆分了header foot等页面就更好了,只需要在foot页面潜入message.jsp页面即可。message.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% if(session.getAttribute("message")!=null&&session.getAttribute("message").toString().trim().length()>0){ out.print("<script>alert('"+session.getAttribute("message").toString().trim()+"');</script>"); session.setAttribute("message",null); } %>
这样一来一旦有message需要显示,前端就会多出一段js代码来,并且执行完后会把session里的这个变量清空。功能实现了,却出现了一个问题,就是因为这是在文件里写了段js代码来弹窗,而判断是在jsp的java代码里写的,这意味着,弹窗后,点击到别的页面,然后通过history.go(-1)或者浏览器的back按钮返回到这个页面时,还是会继续弹窗,因为历史记录里的有那段js的弹窗代码!不过我马上想到了解决方案,就是在输出的js代码里加一句history.go(0),就是刷新当前页面,刷新之后就没有那段js代码了,再返回也没事了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% if(session.getAttribute("message")!=null&&session.getAttribute("message").toString().trim().length()>0){ //use history.go(0) to refresh ,avoid to show the message again out.print("<script>alert('"+session.getAttribute("message").toString().trim()+"');history.go(0)</script>"); session.setAttribute("message",null); } %>
测试了一下,果然没问题了,但过了一阵子,又发现了新的问题,那就是如果post失败的话,还停留在当前页面的话,由于刷新问题,会一直post,然后就一直弹窗!
好吧,这个方法貌似有问题了,但是问题是用来解决的,问题的原因是因为后台判断是否输出js,导致了不同步,即只要执行了js,不管后台到底有没有message,都会弹窗。分析了就可以找到方案了,那就是js执行时要判断后台需不需要显示message,这样就没问题了。但是js又没法直接操作session(一个前台,一个后台。。),所以需要与后台通信,又要不引起注意的通信,那就只有ajax了,不过这个ajax可能是最简单的ajax了,没准还可以不用ajax呢,求大神指教。。 后台ajax代码,使用的struts2的action
public class MessageAction extends BaseAction { public String execute(){ String message=""; if(getSession().get("message")!=null){ message=getSession().get("message").toString(); getSession().put("message", null); } getResponse().setContentType("text/html;charset=utf-8"); PrintWriter out; try { out = getResponse().getWriter(); out.write(JsonUtil.string2json(message)); out.flush(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; } }
前端message.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <script type="text/javascript"> $(document).ready(function(){ $.post("admin/message.action",//这个需要改成自己的action地址 { }, function(data,status){ if(data!=null&&data.length>0){ alert(data); } }); }); </script>
解决问题,觉得这个过程还蛮有意思的,经过自己思考解决问题还是蛮有成就感的O(∩_∩)O