标签：
我想给我的网站实现这样一功能：点击登录按钮，弹出登陆页面，如果登录失败，无刷新显示“账号或密码错误”，如果登陆成功，刷新整个页面并显示cookie。
在写程序之前我就感觉到这中间有个矛盾，如果我想无刷新显示就要用到ajax异步传输，用了ajax还怎么做到刷新页面呢？如果登录失败不刷新，登录成功才刷新，这里需要一个判断。之前我的提交按钮 input 标签 type 属性为 submit 然后在 js 里面设置 return false ，如果经常使用ajax的话对这个应该不陌生，这里就出现一个矛盾，如果我设置return false,它死都不会刷新页面，这样cookie就加载不进去，如果我不设置return false一点提交按钮他就刷新走了，就做不到无刷新显示了。在这个问题上纠结过一些时间，后来我将 input 标签 type 属性设为 button 就让他是一个按钮没有提交功能，所有事情由ajax来做，后来就完美解决了这个矛盾。
整体编程思路：首先做出登陆页面，设计好登录div，遮罩div，默认display:none，点击登陆的时候更改其display:block，关闭的时候再改为display:none，这样默认不显示，登录显示，关闭不显示，这样登录界面就做好了。下面实现cookie的显示，点击提交按钮，由ajax将账号、密码送至后端函数1，如果账号密码不正确，给前端返回一个error，前端发现后端有数据返回，就将error显示出来，至此结束。如果账号密码正确，后端不给前端返回任何数据，前端发现后端没有数据返回，就将数据重新发送至后端函数2，后端函数2将username存储为cookie，然后由前端执行location.reload()刷新页面加载cookie，过程结束。
前端登录Js：
<script type="text/javascript"> function showLogin() { $(‘#denglu‘)[0].reset();var loginDiv = document.getElementById("loginDiv");
var zhezhao = document.getElementById("zhezhao");
var clientx = document.documentElement.clientWidth; var clienty = document.documentElement.clientHeight; var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2; var t_margin = (clienty - parseInt(loginDiv.style.height)) / 2; loginDiv.style.left = l_margin + "px"; loginDiv.style.top = t_margin +"px"; loginDiv.style.display = "block"; zhezhao.style.display = "block";}
function hidLogin() {var loginDiv = document.getElementById("loginDiv");
var zhezhao = document.getElementById("zhezhao");
loginDiv.style.display = "none"; zhezhao.style.display = "none";}
</script>
前端登录HTML：
判断是否显示cookie
{%if username %} <div id="ul2"><div class=‘menu_rdiv‘><a id="out" href="/logout/">注销</a></div>
<div class=‘menu_rdiv‘id="user"><a id=‘un‘href=‘/admin/‘>{{username}}</a></div>
<div class=‘menu_rdiv‘id=‘hy‘><a>你好:</a></div>
</div>
{%else%} <div id="ul2"><div class=‘menu_rdiv‘id="dl"><a href="javascript:showLogin()">登录</a></div>
<div class=‘menu_rdiv‘id="zc"><a href="/register/" target="_blank">注册</a></div>
</div>
{%endif%}登录表单：
<div id = ‘loginDiv‘ style="position:absolute;z-index:2;width:460px;height:370px;display:none;">
<form id=‘denglu‘ method = ‘post‘ enctype="multipart/form-data">
<div id=‘x‘><a href="javascript:hidLogin()">×</a></div>
<div id=‘err‘></div> <div id=‘yhdl‘>用户登录</div> <div id = ‘yhm‘><label for="id_username">账 号:</label>
{{form.username}}<div id="p1"></div></div>
<div id=‘ma‘><label for="id_password">密 码:</label>
{{form.password}}<div id="p2"></div></div>
<div id=‘qd‘><input id=‘put‘ type="button" value = "确定"/>
</div>
<div id=‘xgmm‘><a href=‘/password/‘><<修改密码</a></div>
</form>
</div>
<div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:1385px;background-color: rgb(0, 0, 0);display:none;opacity:0.15;"></div>
ajax部分：
$(function(){$("#put").click(function(){
username=$("#id_username").val() password=$("#id_password").val() $.ajax({ type:"POST", url:"/ajax_login/", data:{‘username‘:username,‘password‘:password}, dataType:"text", success: function(data) { if(data){ $("#err").html(data)}
else{ $.ajax({ type:"POST", url:"/index/", data:{‘username‘:username,‘password‘:password}, success: function(data) {location.reload()
}
})
}
}
});
async:true})
})
Django端函数1：
#判断用户名是否在数据库中def login_validate(request,username,password):
req_value=False
user = authenticate(username=username,password=password)
if user is not None: if user.is_active:auth_login(request,user)
return True return req_value#ajax验证账号密码 @csrf_exempt
def ajax_login(request):
errors="" username = request.POST.get("username",None) password = request.POST.get("password",None) if password: if not login_validate(request,username,password): errors = ‘<p>账号或密码错误</p>‘ return HttpResponse(errors,RequestContext(request))Django端函数2：
#获取用户cookie@csrf_exempt
def index(request):
if request.is_ajax(): username = request.POST.get("username",None) password = request.POST.get("password",None) if login_validate(request,username,password):response = render_to_response(‘index.html‘,{‘username‘:username},RequestContext(request))
response.set_cookie(‘username‘,username,3600)username=request.COOKIES.get(‘username‘,‘‘)
return response form = LoginForm(request.POST)
username=request.COOKIES.get(‘username‘,‘‘)
return render_to_response(‘index.html‘,{
‘username‘:username, ‘form‘:form,},RequestContext(request))
Django url部分：
(r‘^ajax_login/$‘,‘register.views.ajax_login‘),
(r‘^index/$‘,‘register.views.index‘),
这些是实现弹窗登录的核心代码，其他一些CSS的设置根据自己喜好设置吧。
标签：
原文地址：http://www.cnblogs.com/pylab/p/4347461.html
