本文实例讲述了js判断登录与否并确定跳转页面的方法。分享给大家供大家参考。具体如下：
使用session存储，确定用户是否登录，从而确定页面跳转至哪个页面。
判断本地有无customerID：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function
jumpTo(p, url) {
var
customerId=sessionStorage.customerId;
if
(customerId == undefined) {
p.attr(
"href"
,
"page/Login/login.html"
);
<span style=
"white-space:pre"
> </span>}
else
{
p.attr(
"href"
, url);
}
}
function
infoJumpTo() {
var
$info = $(
"#info"
);
jumpTo($info, </code><code class="js string">"<a href="http://localhost/page/AmountAscension/amountAscension.html">http://localhost/page/AmountAscension/amountAscension.html</a>"</code><code class="js plain">); </code></div><div class="line number12 index11 alt1"><code class="js plain">} </code></div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">starJumpTo() { </code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">$star = $(</code><code class="js string">"#star"</code><code class="js plain">); </code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">jumpTo($star,
"http://localhost/page/MyAccount/myAccount.html"
);
}
|
html中，相应的a标签中，写οnclick=”infoJumpTo”等就可以了。
但登录页面的customerID是如何存储到本地的session中的呢？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
function
confirm(){
var
tel=$tel.val();</code><code class="js comments">//获取页面中登录名和密码 </code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">pwd=$pwd.val();
if
(tel==
""
|| pwd==
""
){
//判断两个均不为空（其他判断规则在其输入时已经判断）
alert(
"手机号密码均不能为空！"
)
return
false
;
}
else
{
//以上均符合要求，则调用登录esb接口
$.ajax({ </code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js plain">url:config.baseServerUrl + </code><code class="js string">'/account/login'</code><code class="js plain">,</code><code class="js comments">//相对应的esb接口地址</code></div><div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js plain">type:</code><code class="js string">'post'</code><code class="js plain">, </code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js plain">data:{mobile:tel,password:pwd},</code><code class="js comments">//向服务器（接口）传递的参数</code></div><div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">success:</code><code class="js keyword">function</code><code class="js plain">(data){</code><code class="js comments">//服务器（接口）返回来的数据</code></div><div class="line number13 index12 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(data.success){</code><code class="js comments">//如果返回来的信息说明提交的信息为正确的 </code></div><div class="line number14 index13 alt1"><code class="js spaces"> </code><code class="js keyword">var</code> <code class="js plain">customerId = data.attr.customerInfo.id;</code><code class="js comments">//将数据中用户信息的ID赋值给变量 </code></div><div class="line number15 index14 alt2"><code class="js spaces"> </code><code class="js plain">sessionStorage.customerId = customerId;</code><code class="js comments">//将变量存储到本地sessionStorage中，并且value为customerID </code></div><div class="line number16 index15 alt1"><code class="js spaces"> </code><code class="js plain">window.location.href=</code><code class="js string">'<a href="http://localhost/index.html">http://localhost/index.html</a>'</code><code class="js plain">;//正确登录后页面跳转至 </code></div><div class="line number17 index16 alt2"><code class="js spaces"> </code><code class="js plain">} </code></div><div class="line number18 index17 alt1"><code class="js spaces"> </code><code class="js keyword">else</code><code class="js plain">{</code><code class="js comments">//如果返回来的信息说明提供的信息为错误的 </code></div><div class="line number19 index18 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(tel != data.tel){</code><code class="js comments">//判断是用户名还是密码错误，提示相应信息 </code></div><div class="line number20 index19 alt1"><code class="js spaces"> </code><code class="js plain">alert(data.message); </code></div><div class="line number21 index20 alt2"><code class="js spaces"> </code><code class="js plain">$tel.val(</code><code class="js string">""</code><code class="js plain">); </code></div><div class="line number22 index21 alt1"><code class="js spaces"> </code><code class="js plain">$pwd.val(</code><code class="js string">""</code><code class="js plain">); </code></div><div class="line number23 index22 alt2"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js keyword">false</code><code class="js plain">; </code></div><div class="line number24 index23 alt1"><code class="js spaces"> </code><code class="js plain">} </code></div><div class="line number25 index24 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(pwd != data.pwd){ </code></div><div class="line number26 index25 alt1"><code class="js spaces"> </code><code class="js plain">alert(data.message); </code></div><div class="line number27 index26 alt2"><code class="js spaces"> </code><code class="js plain">$pwd.val(
""
);
return
false
;
}
}
}
})
}
}
|
登录页面，人们一般习惯输完信息后，直接点击enter免除手动点击登录按钮，则js代码如下：
|
1
2
3
4
5
6
|
//判断是否敲击了Enter键
$(document).keyup(</code><code class="js keyword">function</code><code class="js plain">(event){ </code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js keyword">if</code><code class="js plain">(event.keyCode ==13){ </code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">$(
"#login"
).trigger(
"click"
);
}
});
|
希望本文所述对大家的javascript程序设计有所帮助。
<div class="art_xg">
您可能感兴趣的文章:
- JS前端开发判断是否是手机端并跳转操作（小结）
- JS实现点击网页判断是否安装app并打开否则跳转app store
- js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
- js判断手机访问或者PC的几个例子(常用于手机跳转)
- 两款JS脚本判断手机浏览器类型跳转WAP手机网站
- 根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
- JSP中实现判断客户端手机类型并跳转到app下载页面
- 百度判断手机终端并自动跳转js代码及使用实例
- 用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
- js判断PC端与移动端跳转
<div class="jb51ewm"><div class="fl"><img src="//files.jb51.net/skin/2018/images/jb51ewm.png"></div><div class="fr"><p>微信公众号搜索 “ <span>脚本之家</span> ” ，选择关注</p><p>程序猿的那些事、送书等活动等着你</p></div></div></div>
扫一扫
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
