场景：

用户注册的时候，输入用户名之后，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. Yara规则学习

    01 定义 官网: YARA is a tool aimed at (but not limited to) helping malware researchers to identify and c ...

  2. Java Stream 自定义Collector

    Collector的使用 使用Java Stream流操作数据时,经常会用到各种Collector收集器来进行数据收集. 这里便深入了解一点去了解Collector的工作原理和如何自定义Collect ...

  3. 谷歌内部流出Jetpack Compose最全上手指南，含项目实战演练！

    简介 Jetpack Compose是在2019Google i/O大会上发布的新的库.Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码,更强大的功能,能提高开发速度. ...

  4. 用Matlab求解微分方程

    用Matlab求解微分方程 解微分方程有两种解,一种是解析解,一种是数值解,这两种分别对应不同的解法 解析解 利用dsolve函数进行求解 syms x; s = dsolve('eq1,eq2,.. ...

  5. netty系列之:自定义编码解码器

    目录 简介 自定义编码器 自定义解码器 添加编码解码器到pipeline 计算2的N次方 总结 简介 在之前的netty系列文章中,我们讲到了如何将对象或者String转换成为ByteBuf,通过使用 ...

  6. PrismWPF网盘

    技术点 文件分片上传与下载 Vue 正在努力中.... 客户端 采用 WPF:Net5+Prism8+RestSharp 客户端基本结构如下 模块说明 Model: 主要放置Prism模块 ZFile ...

  7. Java Swing 盒布局管理器

    Swing 盒布局管理器 因为项目的原因,重新看看swing的东西,在想要将两个横向的容器纵向表示的时候,发现用盒布局 话不多说,直接代码 package ui; import javax.swing ...

  8. Maven无法下载com.oracle:ojdbc.jar解决方法

    Maven无法下载com.oracle:ojdbc.jar解决方法 从maven仓库中下载失败,可以搭建私服nexus,也可以将jar下载到本地然后导入local_repository 使用maven ...

  9. 启动Django报错:SyntaxError: Generator expression must be parenthesized 解决办法

    这是因为版本不兼容所导致的. 此错误已知与Python问题#32012相关.基于Django 1.11.16及以下的项目将在Python 3.7启动时引发此异常.此问题的补丁已合并到Django 2. ...

  10. Python小白的数学建模课-19.网络流优化问题

    流在生活中十分常见,例如交通系统中的人流.车流.物流,供水管网中的水流,金融系统中的现金流,网络中的信息流.网络流优化问题是基本的网络优化问题,应用非常广泛. 网络流优化问题最重要的指标是边的成本和容 ...