场景:
用户注册的时候,输入用户名之后,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、效果
Django——Ajax发送请求验证用户名是否被注册的更多相关文章
-
《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
-
Ajax验证用户名是否被注册
Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...
-
Ajax - 发送请求原理
1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...
-
ajax发送请求跨域 - uri java代理
问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...
-
Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
-
ajax对象。同步与异步及ajax发送请求
ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...
-
Ajax实现异步刷新验证用户名是否已存在
由于要做一个注册页面,看到许多网站上都是使用Ajax异步刷新验证用户名是否可用的,所以自己也动手做一个小实例 都是简单的实例,所以直接发代码 静态页面Ajax.html <html> &l ...
-
ajax发送请求
首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...
-
原生Ajax发送请求
ajax get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...
随机推荐
-
HDU 5976 数学,逆元
1.HDU 5976 Detachment 2.题意:给一个正整数x,把x拆分成多个正整数的和,这些数不能有重复,要使这些数的积尽可能的大,输出积. 3.总结:首先我们要把数拆得尽可能小,这样积才会更 ...
-
Oracle自带的用户
Oracle安装完毕创建数据库实例的时候,会自动生成三个用户sys,system,scott. sys用户是超级管理员,具有最高权限,充当sysdba角色,可以执行create database,默认 ...
-
JVM的内存分区
JVM的内存分区 这篇文章尝试讨论清楚JVM的内存分区情况. 1. JVM的内存和系统内存的关系 下图是对系统内存及JVM内存的大致描绘 对大多数操作系统,内存可以分为物理内存RAM及Sw ...
-
OpenCV图片矩阵操作相关,对png图片操作(多通道)
文献链接: http://www.cnblogs.com/tornadomeet/archive/2012/12/26/2834336.html 下面这个高手,写了个小程序我还没有调试,回头 调试看看 ...
-
Codeforces 1070J Streets and Avenues in Berhattan dp
Streets and Avenues in Berhattan 我们首先能发现在最优情况下最多只有一种颜色会分别在行和列, 因为你把式子写出来是个二次函数, 在两端取极值. 然后我们就枚举哪个颜色会 ...
-
【导航】Python常用资源(从新手到大牛)
[博客导航] [Python相关] 个人网站/博客/学习平台 中国大学MOOC :高校课程网上公开课学习平台,<Python语言程序设计>是我的入门课. Python123平台 :跟中国 ...
-
mariadb集群配置(主从和多主)
mariadb主从 主从多用于网站架构,因为主从的同步机制是异步的,数据的同步有一定延迟,也就是说有可能会造成数据的丢失,但是性能比较好,因此网站大多数用的是主从架构的数据库,读写分离必须基于主从架构 ...
-
Linux 一 些常用的命令
查看当前系统JAVA的安装路径: echo $JAVA_HOME: 查看内核版本: uname -a ubuntu的防火墙 关闭:ufw disable开启:ufw enable 卸载了 iptabl ...
-
python中的各种模块(np,os,shutill)
PS:本博文摘抄自中国慕课大学上的课程<Python数据分析与展示>,推荐刚入门的同学去学习,这是非常好的入门视频. #np模块 .ndim :维度 .shape :各维度的尺度 (2,5 ...
-
taro 列表渲染
元素的 key 在他的兄弟元素之间应该唯一 数组元素中使用的 key 在其兄弟之间应该是独一无二的.然而,它们不需要是全局唯一的.当我们生成两个不同的数组时,我们可以使用相同的 key key 的取值 ...