需求分析

  • 页面中给出注册表单；
  • 在username input标签中绑定onblur事件处理函数。
  • 当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
  • django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。

js代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用户名是否被注册</title>

    <script src="/static/jquery-3.3.1.js"></script>

    <style>

        .display {

            display: none;

        }

    </style>

</head>

<body>

<form>

    <input type="text" name="username" onblur="r()" class = 'username'>

    <input type="password" name="password" class="password">

    <span id='msg' class="display"></span>

</form>

{#<button onclick="r()">登录</button>#}

<script>

        function r(){

            $.ajax({

                url : '/register/',

                data : {

                    'username' : $('.username').val(),

                    'password' : $('.password').val(),

                },

                type : 'POST',

                success: function(data){

                    console.log(data)

                    $('#msg').removeClass('display')

                    $('#msg').text(data)

                }

            })

        }

</script>

</body>

</html>

views.py

def register(request):

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

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

    print(type(username))

    if username =='':

        print("!!")

        return HttpResponse('该账号已注册')

    else:

        return HttpResponse('ok')

urls.py

urlpatterns = [

    path('register/',views.register),

    path('login2/',views.login2)

]

ajax实现用户注册的更多相关文章

  1. ajax写用户注册

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ajax——用ajax写用户注册

    zhuce.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. 使用ajax对用户注册时，用户名进行检验

    package cn.hopetesting.com.servlet;import com.fasterxml.jackson.databind.ObjectMapper;import javax.p ...

  4. Ajax+Struts2用户注册功能实现

    详细请参考源码(Github):https://github.com/QQ3330447288/ajaxRegister 1.目录结构 2.截图 3.核心代码: register.jsp <sc ...

  5. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  6. $.ajax和vue-resource实现OAuth

    Vue.js——使用$.ajax和vue-resource实现OAuth的注册.登录.注销和API调用 概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST A ...

  7. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    转自:https://www.cnblogs.com/keepfool/p/5665953.html 概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST AP ...

  8. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  9. WEB框架Django之Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一 通过form实现校验字段功能 模型:mod ...

随机推荐

  1. mysql 约束条件 auto_increment 自动增长 创建表时设置自增字段

    auto_increment mysql) )auto_increment; Query OK, rows affected (0.01 sec) mysql> show create tabl ...

  2. http://echarts.baidu.com/demo.html#effectScatter-map

    http://echarts.baidu.com/demo.html#effectScatter-map

  3. Jmeter(三)断言和关联

    Jmeter断言 断言是什么呢,它是用来检查返回结果对不对的.用来验证结果是否正确,如果正确的话,就代表这个请求的返回是正确的,如果没有的话就代表这个请求的结果和我们预期的不一致,这样我们就可以通过断 ...

  4. Boinformatics-2018-10-1-目录

    1.基因分析 --Using standard microbiome reference groups to simplify beta-diversity analyses and facilita ...

  5. 使用yeoman起一个新项目（个人练习记录，勿喷！）

    1.首先安装yeoman:npm install -g yo2.yeoman需要generator来进行操作所以需要安装generator模块:npm install -g generator-web ...

  6. python全栈开发从入门到放弃之socket并发编程多进程

    1.1 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程 ...

  7. WebBrowser自动填充打开文件对话框

    WebBrowser自动填充打开文件对话框   在使用WebBrowser编写自动表单填写软件的时候,不知道大家是否遇到国填写文件选择表单的情况.遇到这种情况的时候,无法直接队Html元素赋值,必须模 ...

  8. CodeForces - 343C Read Time (二分+贪心)

    题意:有N个指针头,M个标记,用这N个针头扫描所有的标记,针头之间互不影响,求扫描完M个标记的最短时间 分析:二分搜答案,mid为时间限制,则只要所有的点在mid秒内被扫描到即可. 对于每个指针,若其 ...

  9. 异常信息 Exception

    void GetExceptionMsg(Exception ex, StringBuilder sb, string Prefix = "") { sb.AppendLine(P ...

  10. Sublime text3：安装插件SublimeREPL解决不支持input

    Sublime text3:安装插件SublimeREPL解决不支持input 安装SublimeREPL 1,调用ctrl+shift+p 输入install回车: 2,输出:sublimerepl ...