场景：

用户注册的时候，输入用户名之后，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. ifix vba 读取计算机中的txt文件，截取字符串显示

    利用vba脚本,使用Scripting.FileSystemObject对象可以实现对文本文件的操作,下面以一个朋友的实际例子为例将截获的字符串进行页面显示. Private Sub CommandB ...

  2. Android源码解析——Handler、Looper与MessageQueue

    本文的目的是来分析下 Android 系统中以 Handler.Looper.MessageQueue 组成的异步消息处理机制,通过源码来了解整个消息处理流程的走向以及相关三者之间的关系 需要先了解以 ...

  3. Speed up Downloading Files on Linux

    Compared aria2c, axel and wget, aria2c is the best. It support multi-thread download (with "-s ...

  4. MySQL数据库优化(2)

    MySQL优化 大批量插入数据优化 1.将数据按照id有序排列 2.使用load关键字(100万条:有序20s,无序1分50秒) 3.插入之前,关闭唯一性校验(SET UNIQUE_CHECKS=0) ...

  5. 用三个while循环和tkinter实现一个显示屏

    用三个while循环和tkinter实现一个显示屏 import tkinter as tk import time # 输入框是跟程序打交道的一个途径,例如程序要求你输入账号密码,那么它就需要提供两 ...

  6. SQL 练习22

    查询出只选修两门课程的学生学号和姓名 --方式1: SELECT Student.SId,Sname from Student WHERE SId in ( SELECT sid from sc GR ...

  7. noip模拟8

    T1 星际旅行 题目描述 一个图存在欧拉路的条件是有\(2/0\)个点有奇数个出度,把一条无向边拆成两条,所以可以选择拆两个自环.一个自环一条边.连接同一个点的边. 先判断图是否是边联通,不联通则输出 ...

  8. 「TJOI2019」唱、跳、rap 和篮球 题解

    题意就不用讲了吧-- 鸡你太美!!! 题意: 有 \(4\) 种喜好不同的人,分别最爱唱.跳. \(rap\).篮球,他们个数分别为 \(A,B,C,D\) ,现从他们中挑选出 \(n\) 个人并进行 ...

  9. 【设计模式】DDD 设计理念

    From: https://liudongdong1.github.io/ 微服务架构,在集中式架构中,系统分析.设计和开发往往是独立进行的,而且各个阶段负责人可能不一样,那么就涉及到交流信息丢失的问 ...

  10. idea打断点后发现被标记的断点处那一行整行被标记了其他颜色，前面没有断点标识的红点

    问题如下: 最后发现有两种解决办法吧,直接走起! 第一种方法: 在View====>Active Editor====>Show Gutter Icons,勾选此选项,发现小红点出来了: ...