仿天猫网站开发3：模态登陆窗口

项目位置仿天猫网站

需要实现的功能

点击“立即购买”或“加入购物车”时，判断当前是否为登录状态，如果未登录，则弹出模态窗口。

---

实现方式

首先是如何判断当前是否为登陆状态？查阅资料可知：
资料查的乱套了，就先省略吧
这里我想到的是，通过在模板中创建一个js变量，通过模板逻辑判断当前是否为登陆状态，然后改变这个变量的值为ture或者false，模板中代码片段如下：

<script>    var MyViewVar = {        stock: {{ item.stock }},        {% if request.user.is_authenticated %}            is_login:true,        {% else %}            is_login:false,        {% endif %}    };</script>

然后在js文件中根据这个is_login标记判断是否为登陆状态，代码如下：

    //监听购买按钮    $(".buyLink").click(function () {        if (MyViewVar.is_login) {            var num = $(".productNumberSetting").val();            location.href = $(".buyLink").attr("href") + "&num=" + num;        } else {            $("#loginModal").modal('show');        }    });

经过测试发现，在未登录情况下确实可以弹出模态登陆页面，但紧接着会刷新页面。为了页面不刷新，需要使用Ajax

---

使用Ajax异步获取数据

将模板文件中的部分修改为：

<script>    var MyViewVar = {        stock: {{ item.stock }},        {% if request.user.is_authenticated %}            is_login:true,        {% else %}            is_login:false,        {% endif %}        page:"{% url 'product:item' item.id %}",    };</script>

其中page就是请求的页面url，然后将js文件中对应方法改为：

    $(".buyLink").click(function(){        var page = MyViewVar.page;        $.get(                page,                function(){                    if (MyViewVar.is_login) {                        var num = $(".productNumberSetting").val();                        location.href = $(".buyLink").attr("href") + "&num=" + num;                    } else {                        $("#loginModal").modal('show');                    }                }        );        return false;    });

经过测试确实成功开启了模态窗口。