欢迎来到站长教程网!

AJAX

当前位置:主页 > 网络编程 > AJAX >

ajax实现简单登录页面

时间:2020-06-18|栏目: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="http://www.zhano.cn/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})

上一篇:AJAX实现数据的增删改查操作详解【java后台】

栏    目:AJAX

下一篇:没有了

本文标题:ajax实现简单登录页面

本文地址:http://www.blue1000.com/wangluobiancheng/AJAX/1990.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7