仿天猫网站开发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;
    });

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