Django——Ajax发送请求验证用户名是否被注册

场景：

用户注册的时候，输入用户名之后，Ajax发送请求到后端，后端验证该用户名是否已经被注册，然后返回到注册页面提示用户。

1、模型：

from django.db import models


class User(models.Model):
    name = models.CharField(max_length=20)
    password = models.CharField(max_length=20)

 

 

2、路由

from django.contrib import admin
from django.urls import path
from app01.views import reg,reg_auth_user

urlpatterns = [
    path('admin/', admin.site.urls),
    path('reg/',reg),                       #注册页面的路由
    path('reg_auth_user/',reg_auth_user)    #Ajax验证用户名的路由
]

　　

3、视图函数

import json
from django.shortcuts import render,HttpResponse
from app01.models import User
import json

def reg(request):
    return  render(request,'reg.html')      #注册时返回一个注册的页面reg.html


def reg_auth_user(request):
    user = request.POST.get('user')         #获取Ajax发送的user的值
    ret = User.objects.filter(name=user)    #从数据库获取name=user的数据对象
    response = {"state": False, "err": ""}  #准备要返回的数据
    if ret:                                 #如果数据库存在这个用户名，则返回'用户名已存在'
        response['state'] = True
        response['err'] = '用户名已被注册'
    return HttpResponse(json.dumps(response))  #如果数据库不存在这个用户名，则返回空值''

　　

4、reg.html注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <h3>注册页面</h3>
    用户名: <input type="text"> <span style="color: red" class="err"></span>     {# 在input框中输入要注册的用户名，span标签用于存放后端返回的错误信息 #}

    <script>
        $(':text').blur(function (){         {# 给input框添加一个失去焦点的事件 #}
            $.ajax({                         {# 发送一个Ajax请求 #}
                url: '/reg_auth_user/',      {# 请求到这个路由 #}
                type: 'post',                {# post请求方式 #}
                data: {
                    user: $(':text').val()   {# 获取发送的数据为键值对，user: input输入的注册用户名 #}
                },
                success: function (res) {    {# 回调函数，res是后端返回的json格式数据 #}
                    res = JSON.parse(res)    {# 将返回的数据反序列化成JS对象 #}
                    $('.err').html(res.err)  {# 将返回的结果写入到页面的span标签中 #}
                }
            })
        })
    </script>
</body>
</html>

　　

5、效果

 

posted @ 2021-09-05 12:53  映辉  阅读(229)  评论(0)    收藏  举报