篇一：js跳转问题

　　

 一、跳转情景

　　1、java后台跳转

　　2、js前端跳转

　　3、定时跳转

 

二、java后台跳转

　　1、response.sendRedirect("")相对路径跳转

response.sendRedirect(request.getContextPath()+"/mobile/user/loginCheck");

　　2、response.sendRedirect("")绝对路径跳转

response.sendRedirect("https://202.104.122.66:8082/guduo-mobile/mobile/user/loginCheck");

 

三、js前端跳转

　　1、action跳转

　　　　相对路径　　

<!-- 设置项目路径 -->
<c:set var="BASE" value="${pageContext.request.contextPath}"/>

<form id="param_search_side_form" action="${BASE }/sys/edit/newsidelist" >
</form>

　　　　绝对路径

<form id="param_search_side_form" actionl="https://202.104.122.66:8082/guduo-mobile/mobile/user/loginCheck">
</form>

　　　　target设置

<form>: form提交后D页面跳转 
<form target="_blank">: form提交后弹出新页面 
<form target="_parent">: form提交后父页面跳转 
<form target="_top"> : form提交后顶层页面跳转

 

　　2、ajax跳转

 　　　　相对路径

　　$.ajax({
            type: 'post',
            url:BASE + '/login',
            data:{"loginName":loginName,"password":password},
            success: function(res) {
                if(res=="ok"){
                    //location.href= BASE+"/sys/user/index.action";
                    location.href=BASE+"/sys/index";
                }else{
                    showInfo(res);
                }
            }

 

　　3、超链接跳转

　　　　history的使用

　 　<a href="javascript:history.go(-1);">向上一页</a>
    <a href="javascript:history.go(-2);">向上两页</a>
    <a href="javascript:history.go(0);">刷新</a>
    <a href="javascript:history.go(1);">向前</a>
    <a href="javascript:history.forward();">向前</a>
    <a href="javascript:history.back();">向前</a>
    注：go(Number)，number(当前页‘0’，下一页‘1’，前一页 ‘-1’)

　　　　点击不刷新

1、<a href="javascript：void(0);" >test</a>  
2、<a href="javascript：;" >test</a>  
3、<a href="####" >test</a> //使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的  

　　　　点击执行方法不跳转

　　　　　　死链接，没任何作用：<a href="javascript：void(0)" >test</a>

　　　　　　回到页首：<a href="#" >test</a>

  　1.<a href="javascript：void(0)" onclick="doSomething()">test</a>  
    2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""  
    3.<a href="#" onclick="alert();event.returnValue=false;">test</a>  

　　　　点击执行方法，false不跳转，true跳转,跳转的路径在href配置

<a href="1.html" onclick="return confirm('是否删除此节点？');" ><img src="shanchu.gif"></a>

　　　　点击直接带参跳转：为get请求

<a href="https://202.104.122.66:8082/guduo-mobile/mobile/user/loginCheck?userId=111">测试</a>
<a href="${BASE}/guduo-mobile/mobile/user/loginCheck?userId=111">测试</a>

 

　　4、location跳转

　　 <input type=button value=刷新 onclick="window.location.reload()">
    <input type=button value=前进 onclick="window.history.go(1)">
    <input type=button value=后退 onclick="window.history.go(-1)">
    <input type=button value=前进 onclick="window.history.forward()">
    <input type=button value=后退 onclick="window.history.back()"> 
    <input type=button value=后/刷 onclick="window.history.go(-1);window.location.reload()">
　　 本界面刷新
    window.location.href = basePath + "personCenter/bankCard/myBankCardList.do";

　　　　本页面跳转

window.location.href = basePath + "personCenter/bankCard/myBankCardList.do"
location.href = basePath + "personCenter/bankCard/myBankCardList.do"

　　　　父页面跳转

parent.location.href=basePath + "personCenter/bankCard/myBankCardList.do"

　　　　顶层页面跳转

top.location.href=basePath + "personCenter/bankCard/myBankCardList.do"

 

四、定时跳转

　　1、设置meta定时刷新

<meta http-equiv="refresh" content="20"> <!--  本页面20秒自动刷新 -->

　　2、设置meta定时刷新跳转

　　　跳转路径：绝对路径（外部地址、内部项目绝对路径）、相对路径（项目内部--jsp界面、后台请求）

　　　不建议使用相对路径跳转后台请求

<meta http-equiv="refresh" content="20;url=http://www.baidu.com"> <!--  本页面20秒自动刷新，并跳转 百度 -->

　　3、setTimeOut指定时间刷新

　　　　　<script language="JavaScript">
            function myrefresh()
            {
                   window.location.reload();
            }
            setTimeout('myrefresh()',1000); //指定1秒刷新一次
         </script> 

　　4、setTimeout定时器，实现时间的动态显示--扩展到指定div

 　　　　 <div id="dynamicTime"></div>
         ...
         <script type="text/javascript" >
            function showTime(){
                var time = new Date();
                $('#dynamicTime').text((time.getYear()+1900)+"年"+
                 　　(time.getMonth()<10?"0"+time.getMonth():timegetMonth())+"月"+
             　　 　　(time.getDay()<10?"0"+time.getDay():time.getDay())+"日   "+ 
             　　 　　(time.getHours()<10?"0"+time.getHours():time.getHours())+":"+ 
             　　 　　(time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes())+"："+ 
             　　 　　(time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds())    
             　　);
         　　　　setTimeout("showTime()",1000);
            }
            $(function(){
                showTime();
             })
        </script>