场景：

用户注册的时候，输入用户名之后，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. 关于vue3简单状态管理约定引发的思考

    官方文档的代码是这样的 export const store = { debug: true, state: reactive({ message: 'Hello!' }), setMessageAc ...

  2. 学习笔记-CCS-MSP430F5529[快速入门篇一]

    由于最近竞赛需要使用TI公司的MSP430系列芯片,本人在最近两天匆忙的学习了一下MSP430F5529(下文统一称作5529)的使用.写下本文是为了将这两天学习内容做一个复习,并且将学习过程中遇到的 ...

  3. 配置多个git用的ssh key

    参考 http://www.sail.name/2018/12/16/ssh-config-of-mac/ 有一点注意 Host 的名字和 HostName改为一致. 因为从git仓库复制的地址是全程 ...

  4. Docker介绍及安装详解

    1:Docker简介 Docker 是一种运行于 Linux 和 Windows 上的软件,用于创建.管理和编排容器.Docker 是在 GitHub 上开发的 Moby 开源项目的一部分.Docke ...

  5. NCB | 定量蛋白质组学揭示细胞外泌体通用标志物Syntenin-1

    外泌体 (exosomes) 是由哺乳动物细胞通过"内吞-融合-外排"等机制,主动向胞外释放的纳米级 (直径40~60 nm) 双层囊泡小体,携带蛋白质.核酸.脂质等多种生物活性分 ...

  6. preg_replace函数/e 模式下的代码执行+一道例题

    目录 例一 例二 补充 看一道ctf题-----[BJDCTF2020]ZJCTF,不过如此 参考链接 例一 源码: <?php preg_replace('/(.*)/ei', 'strtol ...

  7. Clickhouse Docker集群部署

    写在前面 抽空来更新一下大数据的玩意儿了,起初架构选型的时候有考虑Hadoop那一套做数仓,但是Hadoop要求的服务器数量有点高,集群至少6台或以上,所以选择了Clickhouse(后面简称CH). ...

  8. 线程的分离状态（detached state）

    说到线程的分离状态,我认为,之所以会有这个状态,是因为系统对某些线程的终止状态根本不感兴趣导致的. 我们知道,进程中的线程可以调用: [cpp] view plaincopyprint? int pt ...

  9. FIFO 深度了解

    嘻哈第二篇,深度聊聊各种细节. 优化与跨时钟阈分析

  10. filebeat+ELK配置及常用操作

    背景介绍 最近工作涉及几台新服务器的日志需要接入ELK系统,配置思路如下: 使用Filebeat收集本地日志数据,Filebeat监视日志目录或特定的日志文件,再发送到消息队列到kafka,然后log ...