场景：

用户注册的时候，输入用户名之后，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. swagger json导出word，Typora软件推荐！！！

    场景: 前几天项目验收,赶了一整天补API接口设计文档,给爷整吐了.周末的时候就想能不能直接把swagger的json文件导出成word? 顺便学习一下NPOI的使用. 实现思路: 1.先把swaag ...

  2. csredis-in-asp.net core理论实战-哨兵模式-使用示例

    csredis 开源地址 https://github.com/2881099/csredis 续上篇 csredis-in-asp.net core理论实战-主从配置.哨兵模式 示例源码 https ...

  3. git合作开发流程

    一.创建项目与管理 创建项目和管理项目都是管理账号需要做的事情,如果只是合作开发不进行管理,只需要浏览第二部分的内容即可. 1.创建项目 登录代码托管网站,点击添加项目,如下图所示: 填写相应的项目信 ...

  4. kong整合Cosul实践（3）

    1. 准备工作: 需要.netcore或者java程序一套,引入consul第三方包 我这里搭建了一个.netcore的webapi项目,引入Consul第三方包,网上可查资料一堆 环境需要kong, ...

  5. JCE加密和解密 bouncycastle

    https://blog.csdn.net/weixin_43935907/article/details/89155617 https://blog.csdn.net/qq_29583513/art ...

  6. Git（9）-- 远程仓库的使用

    @ 目录 1.查看远程仓库:git remote 2.添加远程仓库:git remote add 3.从远程仓库中抓取与拉取:git fetch和 git pull 4.推送到远程仓库:git pus ...

  7. STM32—中断详解（配合按键中断代码，代码亲测）

    在STM32中执行中断主要分三部分: 1.配置NVIC_Config()函数 2.配置EXTI_Config()函数 3.编写中断服务函数 (注:本文章所用代码为中断按键代码,实现了按键进入中断从而控 ...

  8. HTTP协议特性、HTML标签

    HTTP协议 超文本传输协议,规定浏览器和服务端数据交互格式 四大特性 基于请求响应. 在TCP/IP协议之上的应用层协议. 无状态(不能保存用户信息,后来为了保存用户信息,诞生了cookie,ses ...

  9. 题解 Game

    传送门 一有「字典序最大」什么的的就懵了--这题我颓的std 首先可以发现全局最大得分很好统计,我们令它为 \(k\) 然后我们尝试构造方案,但发现无论怎么放都可能会有后效性 发现对于一个位置,可以放 ...

  10. vue中常用插件（货币、日期）

    货币插件: 价格格式化 // https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js const digit ...