网页首页上模拟ajax请求

现有一个提前做好的网页首页代码如下：
用一个服务器模型做个模拟
别克汇首页如下：

别克汇——首页.png

以京东上的一个登录小标为例
如果用户已经登录过，那么直接显示，***您好，欢迎使用别克汇，显示用户，并且有我的订单
如果没有登录，那么此刻需要登录，显示请登录
模拟ajax请求，先把首页和资源文件拷贝一下
（需要的话可以私我）
head部分如下：

<head>
    <meta charset="UTF-8">
    <title>登录小头像</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: 'js/data.json',
            type: 'get',
            dataType: 'json'
        })
        .done(function(data) {
            if(data.code == 200){
                $('#logout').addClass('show');//让它显示
                $('#logout em').html(data.data.name);//获取李念，作为内容塞给标签
                $('#login').addClass('hidden');//把未登录的隐藏

            }
        })
        .fail(function() {
            alert('连接超时！请重试');
        });
    </script>
</head>

这样请求就不会冲突了，这时候登录过只显示登录过的正常界面

<div id="def_head>
    <img class="center-block img-circle" src="img/4.jpg" alt="头像">
</div>

<div id="usr_head">
    <img class="center-block img-circle" src="img/4-4.jpg" alt="头像">
</div>

最后，因为这部分设置过登录还是未登录之后，京东狗的头像还是存在没有变过
所以，我们可以给他登录过的换一个头像，只需要给usr_head换一个头像
然后就大功告成了
over学起来
最后效果如图：

QQ浏览器截图20180920195817.png

网页首页上模拟ajax请求

推荐阅读更多精彩内容