场景：

用户注册的时候，输入用户名之后，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发送请求验证用户名是否被注册的更多相关文章

  1. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  2. Ajax验证用户名是否被注册

    Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...

  3. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  4. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  5. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  6. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  7. Ajax实现异步刷新验证用户名是否已存在

    由于要做一个注册页面,看到许多网站上都是使用Ajax异步刷新验证用户名是否可用的,所以自己也动手做一个小实例 都是简单的实例,所以直接发代码 静态页面Ajax.html <html> &l ...

  8. ajax发送请求

    首先创建XMLHttpRequest对象,利用此对象发送请求 主页面 <!doctype html> <html lang="en"> <head&g ...

  9. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

随机推荐

  1. Spring in Action学习笔记（2）

    Spring基础 AOP 面向切面编程 通知.连接点.切点.切面 Spring提供 4 种类型的AOP支持: 基于代理的经典SpringAOP:使用ProxyFactoryBean. 纯POJO切面: ...

  2. Linux下Nginx基础应用

    Nginx简介: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.其将源代码以类BSD许可证的形式发布,因 ...

  3. Spring Security OAuth2 远程命令执行漏洞（CVE-2016-4977）

    影响版本: 2.0.0-2.0.9 1.0.0-1.0.5 poc地址 https://github.com/vulhub/vulhub/blob/master/spring/CVE-2016-497 ...

  4. UI自动化学习笔记- 日志相关操作

    一.日志相关 1.日志 概念:日志就是用于记录系统运行时的信息,对一个事件的记录,也称log 1.1 日志的作用 调试程序 了解系统程序运行的情况,是否正常 系统程序运行故障分析与问题定位 用来做用户 ...

  5. C/C++入门

    C:面向过程-函数 C++:面向对象-类:向下兼容C 程序包含头文件+主函数 简单数据类型 long long型赋超过int型范围的初值,需要在初值后面加上LL,否则可能会编译错误 不要使用float ...

  6. Python小白的数学建模课-16.最短路径算法

    最短路径问题是图论研究中的经典算法问题,用于计算图中一个顶点到另一个顶点的最短路径. 在图论中,最短路径长度与最短路径距离却是不同的概念和问题,经常会被混淆. 求最短路径长度的常用算法是 Dijkst ...

  7. burp暴力破解之md5和绕过验证码

    Burpsuite是一个功能强大的工具,也是一个比较复杂的工具 本节主要说明一下burp的intruder模块中的2个技巧 1.md5加密 我们在payload Processing中的add选项可以 ...

  8. nmap工具使用随笔

    1.nmap主要用途:主机发现,端口扫描,版本检测,os检测 2.Nmap是Linux下的网络扫描和嗅探工具包,它可以扫描大型的网络,获取那台主机正在运行以及提供的服务等信息. 3.nmap语法格式: ...

  9. 4 剑指Offer53-在排序数组中查找数字

    统计一个数字在排序数组中出现的次数. 示例 1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: 2  示例 2: 输入: nums = [5,7,7,8,8,10 ...

  10. Access, Modify, Change Time of Linux File

    All these 3 time can be viewed by "stat " command. Access time is influenced by read opera ...