对于一般的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+"</br>"+"市:"+obj.userInfo.cityName+"</br>"+"区/县:"+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": "东城区"//区名称
}
最后效果:(页面贼丑,凑活看吧)