需求分析

  • 页面中给出注册表单；
  • 在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. Redis 搜索引擎优化

    场景 大家如果是做后端开发的,想必都实现过列表查询的接口,当然有的查询条件很简单,一条 SQL 就搞定了,但有的查询条件极其复杂,再加上库表中设计的各种不合理,导致查询接口特别难写,然后加班什么的就不 ...

  2. MySQL高可用架构之MHA（转）

    简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...

  3. Mac打开应用提示已损坏的解决办法

    相信很多升级了最新Mac系统的用户在打开一些应用的时候都会出现“应用XX已损坏”的系统提示,安装这些应用的时候总是提示“已损坏,移至废纸篓”这类信息,根本无法打开应用. Mac打开应用提示已损坏的解决 ...

  4. #pragma 的用法

    它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情况下,给出主机或操作系统专有的特征.依据定义,编译指示是机 ...

  5. Windows下IIS+PHP 5.2的安装与配置

    Windows下IIS+PHP 5.2的安装与配置   Windows下PHP的安装虽然简单,但如果不注意方法,仍然会让你头疼.此外,PHP 5.2版本与之前4.x版本也有一些不同,所以有必要记录一下 ...

  6. PHP实现excel导出

    首先去下载PHPExcel类,地址http://phpexcel.codeplex.com/ 方法如下第一步引入这个扩展类 Vendor('PHPExcel'); 第二部就是方法了,下面简单的实现方法 ...

  7. 关于cgi、FastCGI、php-fpm、php-cgi（复制）

    首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  8. 一步一步学EF系列四【升级篇 实体与数据库的映射】

    之前的三张为基础篇,如果不考虑架构问题,做一般的小程序,以足够用了.基本的增删改查也都有了.但是作为学习显然是不够的.通过之前三章的学习,有没有发现这样写有什么问题,有没有觉得繁琐的?可能有人会说,之 ...

  9. angular-selcet

    常规用法代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  10. Paper List ABOUT Deep Learning

    Deep Learning 方向的部分 Paper ,自用.一 RNN 1 Recurrent neural network based language model RNN用在语言模型上的开山之作 ...