如何在登录成功后将后台的数据返回到另一个页面

对于一般的Ajax请求来说,它只能将后台返回的数据,加载到当前页面,不可跨页面传值(页面的刷新问题),而项目中经常会用到跨页面传值,
这就需要引入sessionStorage (会话存储)。
sessionStorage适用于在一个当前会话中保存数据,而如果结束当前会话(关闭浏览器),这个数据就会丢失。
对于我的项目而言,我需要将登陆成功后,后台返回给我的用户的个人信息展示到个人资料页面,这里面就存在跳转后浏览器的刷新,sessionStorage保存的数据就会被刷新掉,所以我们需要在登录成功后,现将数据保存到sessionStorage中,进入到你需要加载的页面时,需要在当前页面插入

<script>
//对于Jquery来说
    $(function(){
        //在这里重新获取你要读出的数据
    });
script>

我的代码部分:

//登陆
    function load(){
        $.ajax({
            url:'http:xxxxxxxxxxxx',
            type:'post',
            data: $('#form').serialize(),
            success:function(data){
                if(data.code==200){
                    //这一步时将后台获取的data存储到obj中
                    sessionStorage.obj = JSON.stringify(data);
                    //登陆成功后跳转到首页
                    window.location.href="shouye.html";
                }else if(data.code==400){
                    alert("账号或密码错误");
                }
            }
        })

//个人资料页

 $(function(){
        var str = sessionStorage.obj;
        if(str==null){
            window.location.href="load.html";
        }else{
            var obj = $.parseJSON(str);
            $("#userName").html(obj.userInfo.userName);
            $("#fan").html(obj.userInfo.fansNum);
            $("#words").html(obj.userInfo.signature);
            $("#watch").html(obj.userInfo.attentionNum);
            $("#local").html("省:"+  obj.userInfo.provinceName+"
"
+"市:"+obj.userInfo.cityName+"
"
+"区/县:"+obj.userInfo.districtName); } })

后台返回参数:

{
  "code": 状态码,
  "msg": 结果信息,
  "userInfo": {//用户信息,如果登录失败则为null
    "id": 用户信息id,
    "userName": 用户昵称,
    "sex": 性别,//true为男,false为女
    "signature": 个性签名,//可能为null
    "faviconUrl": 头像,//可能为null
    "attentionNum": 关注数,
    "fansNum": 粉丝数,
    "provinceId": 省id,
    "cityId": 市id,
    "districtId": 区id,
    "cityName": "北京市",//市名称
    "provinceName": "北京市",//省名称
    "districtName": "东城区"//区名称
  }

最后效果:(页面贼丑,凑活看吧)
如何在登录成功后将后台的数据返回到另一个页面_第1张图片

你可能感兴趣的:(同城书友项目)