js返回上一页并刷新

分手后的思念是犯贱 2022-06-14 02:28 348阅读 0赞

参考：[js控制，返回上一页后强制刷新][js]

在新页面中写：

history.go(-1);

返回上一页。

在上一页的代码中写：

$(function () { 
            if(window.name != "page1"){
                location.reload();
                window.name = "page1";
            }
            else{
                window.name = "";
            }
      }

在回到该页面时，强制刷新一次。

2017-06-15补充：  
上述方法虽然说实现了返回后强制刷新原页面的效果，但是在实际使用的时候还是存在比较大的问题。  
假设我们现在有一个页面a.jsp，默认展示所有学生列表，在当前页面中，输入查询条件，如班级，查到某班级的学生列表。然后对列表中的某一行，如学生甲，进行操作，点修改，跳转到页面b.jsp。修改完成并保存后，通过页面b的回调函数，显示一个弹窗，展示保存结果。关闭弹窗后，自动返回原页面，也就a.jsp。现在希望a.jsp页面仍保留原有的查询条件，只展示某班级的学生列表，但是列表已经被刷新了，显示的是最新的学生信息。  
那么问题来了，怎么做到返回上一页并刷新上一页，此外，还保留上一页原有的信息呢？  
原先采用的方法如上。方法存在的问题：第一，直接进入页面a时，页面会刷新两次，体验比较糟糕。第二，虽然说从b页面跳转回来的时候确实实现了自动刷新的效果，但是，刷新时没有保留住原有的查询条件参数。  
后来，就采用了一个本方法来实现想要的效果：  
原先，跳转到修改页面的方法为：

window.location.href='queryKeyWord.htm?id='+id;

现在在a.jsp中，新增一个隐藏的form

<%-- 方法共用表单--%>
                    <form class="form-inline" action="toUpdateStu.htm" id="updateForm">
                        <%-学生id，修改时用-%>
                        <input type="hidden" name="id" id="q_id"/>
                        <%-查询条件-%>
                        <input type="hidden" name="pageId" value="${searchMap.pageId}">
                        <input type="hidden" name="className" value="${searchMap.stu.className}"/>
                        <input type="hidden" name="name" value="${searchMap.stu.name}"/>
                    </form>

在查询并进入到a页面时，就将查询条件同时写一份到隐藏域中，同时，将跳转到b页面的方法改写为：

$("#q_id").val(id);
        $("#queryForm").submit();

java的跳转方法如下：

public ModelAndView toUpdateStu(Long id,PageBean pageBean,HttpServletRequest request,String pageId, String className, String name) {
            // 设置PageBean的url为findAllGoods.htm
            pageBean.setUrl("keyWordManage.htm");
            // 结果集
            Map<String, Object> resultMap = new HashMap<String, Object>();
            if(id!=0L) {
                Student stu=  stuService.selectByPrimaryKey(id);
                resultMap.put("stu",stu);
    
                resultMap.put("pageId",pageId);
                resultMap.put("className",className);
                resultMap.put("name",name);
            }
    
            resultMap.put("pageBean", pageBean);
    
            return new ModelAndView("jsp/b").addAllObjects(resultMap);
        }

将查询条件带到b页面去，  
同样，在b页面中，添加隐藏表单

<%--跳转回审核页面保存的参数--%>
                    <form class="return_form" action="stuList.htm" method="post">
    
                        <input type="hidden" name="pageId" value="${pageId}">
                        <input type="hidden" name="className" value="${className}"/>
                        <input type="hidden" name="name" value="${name}"/>
    
                    </form>

关闭回调的弹窗后，调用方法

$('.return_form').submit();

回到a页面，即可实现返回并刷新，且保留原有查询参数的效果。

> 注：带参数的方法应该是不用这么繁琐的。我会把语句写的这么啰嗦，主要是项目是要求在谷歌浏览器上运行，我测试的时候没有开隐身模式，缓存清不干净，很多在js文件中写的改动在调试过程中都没有生效。一开始没有发现这个问题，就越改越繁琐了。

诸位要是有更好的方法，欢迎指教~

[js]: http://blog.csdn.net/bcqtt/article/details/51670461