场景：
用户注册的时候，输入用户名之后，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、效果