下面是一个 ajax 检测用户名是否可用的例子。

django  项目中。

—— views.py 里——

from django.shortcuts import render,HttpResponse

from django.views.decorators.csrf import ensure_csrf_cookie

from app01 import models

from django.http import JsonResponse

@ensure_csrf_cookie

def reg(request):    # 注册

    return render(request,'reg.html')

def check(request):   # 检测用户名是否可用

    user = request.POST.get('user')

    ret  = models.User.objects.filter(name=user)

    if ret:

        return JsonResponse({'status':1,'msg':'用户名已存在'})

    else:

        return JsonResponse({'status':0,'msg':'可用的用户名'})
—— reg.html 里——

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>reg</title>

</head>

<body>

<p>用户名

    <input type="text" name="user"><span></span></p>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script src="/static/js/ajax_setup.js"></script>

<script>

    $('[name="user"]').blur(function () {

        _this = $(this);

        {#alert($('[name = "user"]').val());#}

        $.ajax({

            url: '/check/',

            type: 'post',

            data: {

                user: $('[name="user"]').val(),

                {#属性选择器#}

            },

            success: function (res) {

                _this.next().text(res.msg)

            }

        })

    }).focus(function () {

        _this.next().text('')

    });   {#链式操作#}

</script>

</body>

</html>

另一种Js 代码:
<script>
    $('[name="user"]').blur(function () {
       　　$.ajax({
            url: '/check/',
            type: 'post',
            data: {'user': $('[name="user"]').val()},
            success: (res) => {              #箭头的使用
                $(this).next().text(res.msg)
            }
        })
    }).focus(function () {
        $(this).next().text('')
    })
</script>
其他:
-- models.py --

from django.db import models

class User(models.Model):

    name = models.CharField(max_length=22)  # varchar

-------------------------------------------
-- urls.py --

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^reg/', views.reg),

    url(r'^check/', views.check),]

-------------------------------------------
-- settings.py --
STATIC_URL = '/static/'

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,'static')]

ajax 检测用户名是否可用的更多相关文章

  1. asp.net ajax 检测用户名是否可用代码

    原文  asp.net ajax 检测用户名是否可用代码 .net ajax 检测用户名是否可用代码 <script type="text/网页特效" src="c ...

  2. Ajax检测用户名是否已经注册

    程序功能 当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程 利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...

  3. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  5. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. Ajax校验用户名是否可用

    准备 导包:DBUtil,JDBC,C3P0 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 第2.3.条查看https://blog.csdn.net/weixin_ ...

  7. php运用validate+ajax检测用户名是否已存在

    前提:如果还不知道什么是validate,请前往这里 一.remote rules: username:{ required:true, minlength:8, maxlength:8, remot ...

  8. thinkphp ajax检测是否数据可用

    模板文件:如 index.html 模板文件如:(index.html) <form><input type="text" name="username ...

  9. Django ajax 检测用户名是否已被注册

    添加一个 register.html 页面 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. Linux 磁盘空间大小统计du命令常见使用方法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hongweigg/article/details/37692057 在 Linux下,能够对某个文件 ...

  2. 快学Scala 1

      1. Scala解释器读到一个表达式,对它进行求值,将它打印出来,接着再继续读下一个表达式.这个过程被称作“读取-求值-打印-循环”,即REPL.   2. 从技术上来讲,scala程序并不是一个 ...

  3. vux 是基于 WeUI 和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

    https://doc.vux.li/zh-CN/ https://vux.li/

  4. DS1-2

    #include <stdio.h> void PrintN_1(int i, int N); void PrintN_2(int i); int main() { int n; scan ...

  5. 对 data属性的使用之一

  6. GitHub上个最有意思的项目合集（技术清单系列）

    没有1K以上的星星都不好意思推荐给大家!林子大了,啥项目都有,这里给大家搜罗了10个Github上有趣的项目.如果你就着辣椒食用本文,一定会激动的流下泪来...... 1.一行代码没有 | 18k s ...

  7. [Java in NetBeans] Lesson 14. ArrayList and Collections

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. Collection: container that contians objects. 2. Difference betw ...

  8. 虚拟机 liunx系统以 root 身份登录权限

    开启虚拟机 打开终端开启root账户 :sudo passwd -u root 输入当前用户的密码   为root账户设置密码:sudo passwd root 设置root密码,输入两次   测试r ...

  9. Windows(华硕/联想)笔记本上安装黑苹果与win双系统教程

    声明:电脑小白者请谨慎安装,如有需要可私聊或留言提供安装工具 首先说明:Windows PC的文件操作系统也就是磁盘格式是FAT32或 NTFS ,而 Mac 的文件操作系统格式是 HFS ,所以这时 ...

  10. xml文档对象模型doc

    对与DOM来说 ,一切都是节点Node; ②Document可以看成一个节点,Element可以看成一个节点,Text可以看成一个节点, 封装出来的对象都可以看成节点Node; ③在JDK中,Node ...