web项目之HTML页面简单的获取登陆用户名

Cookie和Session是什么呢?

  首先大家都知道,HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。这时候就出现了cookie会话跟踪技术。

  给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理,是存储在客户端上的。

  Session是服务器端使用的一种记录客户端状态的机制,相当于在服务器端建立一份用户档案表,只需要在档案表中进行查询,判断与当前客户是否匹配。Session也是一种key-value的属性对,通过getAttribute(Stringkey)和setAttribute(String key,Object value)方法读写客户状态信息。Servlet里通过request.getSession()方法获取该客户的Session。

HTML获取登陆用户名

  Session是JSP的九大内置对象之一。对于HTML不太友好,那静态资源如何获取呢?

  • 第一种是建立一个过渡的Servlet,保存用户Session,进行获取;
  • 第二种是通过后台把路径+用户名进行拼接通过ajax传到前台,前台获取url对其进行操作。

以下讲解第二种:

第一步:
  把URL路径传到需要的页面

$.ajax({
   url: '/login',
   data: {
       username: username,
       password: password
   },
   type: 'GET',
   success: function (result) {
       if (result.code === 0) {
           if(val == num){
               layer.msg("登录成功", function () {
                   window.location.href = "index1.html?"+$("#username").val();
               })
               }else{
               layer.msg('验证码错误')
           }
       } else {
           layer.msg("登录失败," + result.msg, {icon: 2})
       }
   }
})

  重要的是 window.location.href = "index.html?"+$("#username").val();这一句,其中$("#username").val()获取用户名的值,username为用户名的id.

第二步:

  在index.html对路径进行获取和操作。先定义一个接收用户名的id

<p id = "name"></p>

  再通过JS进行获取

<script type="text/javascript">
     var url = location.href;
     var num =url.indexOf("?");
     var str = url.substr(num+1);
     $("#name").html("欢迎您:" +str);
</script>

  到了这一步,细心的你会发现,如果url中传的是中文,即你的用户名是中文的时候,就会出现乱码,怎么办呢?

解决方案:

  • 使用 decodeURI() 函数可对进行解码

如下:

<script type="text/javascript">
     var url = decodeURI(location.href);
     var num =url.indexOf("?");
     var str = url.substr(num+1);
     $("#name").html("欢迎您:" +str);
</script>

  这样就能解决乱码了。

  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值