本文摘自PHP中文网,作者coldplay.xixi,侵删。
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下
【相关文章推荐:ajax视频教程】
一.什么是ajax
Ajax是一种无需重新加载整个网页,能够更新部分网页的技术。
二.ajax的工作原理
Ajax工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容,这样就实现了一个静态页面也能获取到数据库中的返回数据信息了。 所以Ajax实现了一个静态网页在不刷新整个页面的情况下与服务器通信,减少了用户等待时间,同时降低了网络流量,增强了客户体验的友好程度。
三.用ajax实现简单的登录页面
1.ajax_login.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>登录页面</title>
<style>
.p1{
display: none;
color: red;
}
</style>
<script src= "/static/js/jquery-1.12.4.min.js" ></script>
<script>
$( function () {
$( '#register' ).click( function () {
username = $( '#username' ).val();
password = $( '#password' ).val();
rember = $( '#rember' ).val();
$.ajax({
url: "/login_ajax_check" ,
type: "POST" ,
data:{ "username" :username, "password" :password, "rember" :rember},
dataType: "json" ,
}).done( function (data) {
if (data.res==1){
location.href= "/index" rel= "external nofollow"
} else {
$( '.p1' ).show().html( '用户名或密码输入错误' )
}
})
});
});
</script>
</head>
<body>
<p>
用户名:<input type= "text" id= "username" ><br/>
记住用户名:<input type= "checkbox" id= "rember" ><br/>
密码<input type= "password" id= "password" ><br/>
<input type= "submit" value= "登录" id= "register" >
<p class = "p1" ></p>
</p>
</body>
</html>
|
2.views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | from django.http import HttpResponse,JsonResponse
def login_ajax(request):
return render(request, "booktest/login_ajax.html" )
def login_ajax_check(request):
username = request.POST.get( 'username' )
password = request.POST.get( 'password' )
if username = = "admin" and password = = "12" :
jsonresponse = JsonResponse({ "res" : 1 })
return jsonresponse
else :
return JsonResponse({ "res" : 0 })
|
相关学习推荐:js视频教程
以上就是ajax实现简单登录页面详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
什么是ajax跨域访问
jquery javascript ajax区别是什么
ajax的url路径怎么写?
如何制作一个简单的html登录页面(附代码)
javascript如何实现ajax
vue应用程序中实现ajax的四个地方
javascript和ajax的区别是什么
js中怎么写ajax
jquery、ajax、json三者之间的关系
如何实现ajax请求?
更多相关阅读请进入《ajax》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » ajax实现简单登录页面详解