ajax实现简朴登录页面

Ajax是一种无需从头加载整个网页,可以或许更新部门网页的技能。

二.ajax的事情道理

Ajax事情道理是一个页面的指定位置可以加载另一个页面所有的输出内容,这样就实现了一个静态页面也能获取到数据库中的返回数据信息了。 所以Ajax实现了一个静态网页在不刷新整个页面的环境下与处事器通信,淘汰了用户期待时间,同时低落了网络流量,加强了客户体验的友好水平。

三.用ajax实现简朴的登录页面

1.ajax_login.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> .div1{ display: none; color: red; } </style> <script src="https://www.jb51.net/static/js/jquery-1.12.4.min.js"></script> <script> $(function () { $('#register').click(function () { // alert('ok'); //获取用户名和暗码: username = $('#username').val(); password = $('#password').val(); rember = $('#rember').val(); // alert(rember); $.ajax({ url:"/login_ajax_check", type:"POST", //提交方法 data:{"username":username,"password":password,"rember":rember}, dataType:"json", }).done(function (data) { if (data.res==1){ // alert('username') location.href="/index" }else{ // alert('username'); $('.div1').show().html('用户名或暗码输入错误') } }) }); }); </script> </head> <body> <div> 用户名:<input type="text" ><br/> 记着用户名:<input type="checkbox"><br/> 暗码<input type="password"><br/> <input type="submit" value="登录"> <div></div> </div> </body> </html>

2.views.py

from django.http import HttpResponse,JsonResponse def login_ajax(request): """ajax登录页面""" return render(request,"booktest/login_ajax.html") def login_ajax_check(request): """ajax登录校验""" username = request.POST.get('username') # 通过'username'这个键拿到数据 password = request.POST.get('password') #若登录正确 if username == "admin" and password == "12": jsonresponse = JsonResponse({"res":1}) return jsonresponse #登录错误: else: return JsonResponse({"res":0})

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdfzd.html