项目位置仿天猫网站
需要实现的功能
点击“立即购买”或“加入购物车”时,判断当前是否为登录状态,如果未登录,则弹出模态窗口。
实现方式
首先是如何判断当前是否为登陆状态?查阅资料可知:
资料查的乱套了,就先省略吧
这里我想到的是,通过在模板中创建一个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;
});
经过测试确实成功开启了模态窗口。