需求分析

  • 页面中给出注册表单；
  • 在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 自动增长 修改自增字段起始值

    创建一张表 t20 mysql) ); Query OK, rows affected (0.01 sec) mysql> desc t20; +-------+----------+----- ...

  2. 从CPU/OS到虚拟机和云计算

      从CPU/OS到虚拟机和云计算  作者:张冬            关于软硬件谁为主导这个话题,套用一句谚语就是三十年河东三十年河西.风水轮流转.软件和硬件一定是相互促进.相互拆台又相互搭台的. ...

  3. 001-window下运行linux

    一.概述 前提:有条件的情况下,自行安装 在windows上模拟linux环境,主要有三种方法: 1.VMware等虚拟机,缺点:占用系统资源多,运行速度慢. 2.Cygwin等模拟环境,用windo ...

  4. 新建虚拟机与本机ping不通（一招解决）

    初始新建虚拟机或者复制虚拟机后,发现虚拟机能ping通内外网,但是本机无法ping通虚拟机,xshell也无法连接虚拟机 这时候就很头疼了,因为要上传很多文件到虚拟机上面 解决办法: 1.关闭虚拟机后 ...

  5. 模块讲解----sys

    sys:跟python解释器相关的信息 #命令行参数list,第一个元素时程序本身路径 print(sys.argv) 注意:执行脚本时,可以传参数. #退出程序,正常退出时exit(0) sys.e ...

  6. pytorch rnn 2

    import torch import torch.nn as nn import numpy as np import torch.optim as optim class RNN(nn.Modul ...

  7. property函数的使用

    描述 property函数的作用是在新式类中返回属性值 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改 s=Student() s.score= ...

  8. 【android】activity的4种启动模式简介

    首先咱必须知道,activity是以栈(后进先出)的结构进行管理的. 当活动A启动了活动B时,A被压入到栈内,B在栈的最顶层.当B调用finish()结束活动时,B从栈弹出,此时A在栈的最顶层. 我们 ...

  9. ASP.NET Core EF 查询获取导航属性值，使用Include封装

    // 引用 using Microsoft.EntityFrameworkCore; // 摘要: // Specifies related entities to include in the qu ...

  10. jquery ajax修改全局变量或者局部变量示例代码

    今天在工作的时候遇见一个问题,利用ajax到action中查询返回的值付给全局变量或者局部变量,总是改变不了,后来查找资料才发现需要添加async:false 示例代码: var status=1; ...