Django框架下使用ajax模拟用户登录验证

Django是一个开源的Python基于web开发而设计的应用框架，基于MVC的设计思想，大大简化了网站开发的难度，能够简单快速的开发网站。其中封装的大量函数和方法，可以直接调用，同时扩展性非常好，可以扩展第三方插件。框架的主要三部分M（模型）V（视图）T（模板）是基于MVC的思想在Django内的结构，其中V接受浏览器的信息传递给M把数据存进数据库，还可以接受M的返回结果让T产生一个HTML页面，Django的特点是大而全，内嵌了ORM框架，通过文件迁移建立类和表的对应关系，操作数据库不需要写sql语句，而是通过类和对象对数据表操作，Django是目前Python开发网站最常用的后端框架。

Ajax

异步的javascript，在不全部加载某一个页面部的情况下，对页面进行局的刷新。

Ajax请求最主要的两点:

1) 分析出ajax请求时需要携带参数。

2) 分析出对应的视图函数处理完成之后，返回的json的数据格式。

由于是模拟登录所以本文并没有涉及到从数据库取数据，只是通过这样一个例子来了解前端页面如何通过局部刷新来验证用户。验证表单页面只是简单的效果几款登录表单，文章中并没有将Django框架中自动生成的代码复制进来，而是按照执行流程的顺序写。

项目的URL和应用的URL

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),//url匹配到的时候，会进入管理员页面，管理员页面Django框架内自带，不需要写。
    url(r'^', include('booktest.urls')),
]

from django.conf.urls import url
from booktest import views

urlpatterns = [
    url(r'^login_ajax/$', views.login_ajax),#显示ajax登录页面
    url(r'^login_ajax_check/$', views.login_ajax_check),#显示ajax登录校验
    
]

扫描二维码关注公众号，回复： 585465 查看本文章

配置url时，首先在项目的urls.py文件中添加配置项，并不写具体的url和视图函数之间的对应关系，而是包含具体应用的urls.py文件，在应用的urls.py文件中写url和视图函数的对应关系。

视图view

from django.shortcuts import render,redirect
from django.http import HttpResponse,JsonResponse
# login_ajax
def login_ajax(request):
    return render(request,'booktest/login_ajax.html') //视图根据URL匹配的名显示对应的网页

# login_ajax_check
def login_ajax_check(request):
    # return JsonResponse({'res':1})
    username = request.GET.get('username')      
    password = request.GET.get('password')

    if username=='smart' and password=='123':
        return JsonResponse({'res':1})  //返回json数据，是一个字典类型，自定义‘1’表示成功，‘0’表示失败
    else:
        return JsonResponse({'res':0})

浏览器的登录请求的过程如下：

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax登陆页面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <style >
        #errmsg{
            display: none;
            color: red;
        }
        /*没有美化页面，只是简单效果*/
   

    </style>
    <script>
        $(function () {
            $('#btnLogin').click(function () {
                username = $('#username').val()
                password = $('#password').val()
{#                发起校验用户名请求，请求的地址是/login_ajax_check/#}
                $.ajax({
                    'url': '/login_ajax_check/?username='+username+'&password='+password,
                    'type':'get', //请求提交的方式get/post
                    'dataType':'json',
                }).done(function (data) {    //回调函数获取的data就是view返回的json数据
{#                    alert(data.res)#}
                    if(data.res == 0){
                        $('#errmsg').show().html('用户名或密码错误') //jQuery动态添加网页内容
                    }else {
                        location.href='/index/'      //验证成功登录首页
                    }
                }).fail(function () {
                    alert('服务器请求成功')
                })
            })
        })
    </script>
</head>
<body>
    <div class="div1">
        <label>用户名:</label><input type="text" id="username"><br>
        <label>密码:</label><input type="password" id="password"><br>
        <div id="errmsg"></div>
        <input type="button" value="登陆" id="btnLogin">
    </div>
</body>
</html>

ajax请求的过程：

1）发起ajax请求：jquery发起

2）执行相应的视图函数，返回json内容

3）执行相应的回调函数。通过判断json内容，如果登录成功，则跳转到成功页面。如果不成功，则对登录也进行局部刷新。

另一种验证的方式通过网页 重定向，如果账户密码正确跳转到首页，如果错误重定向到登录页面，这种方式的缺点就是在点击登录按钮的时候会有一个跳闪，影响用户体验。

眼界决定做选择，莫做井底之蛙，勿自欺欺人！

Django框架下使用ajax模拟用户登录验证

猜你喜欢