需求分析

  • 页面中给出注册表单；
  • 在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. linux rhel unix centos FreeBSD 常用命令

    一:使用CentOS常用命令查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /pr ...

  2. mac下python环境pip报错[SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:590) 的解决方法

    1.mac下python环境pip报错: issuserdeMacBook-Pro:~ issuser$ pip install pyinstallerCollecting pyinstaller  ...

  3. SCADA必备函数 实际测试。

    一:GetTickCount() 综述: 这是一个Window的平台的API函数, 所以啊 在 MFC中 他的前面有两个冒号,像个和尚一样. 所以它不会受限于类,可以在MFC中任意位置使用. 这个函数 ...

  4. C++ error C2064:

    error C2064: term does not evaluate to a function 错误原因,非函数,当成函数使用了

  5. Python之路——线程池

    1 线程基础 1.1 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2 线程同步——锁 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样,其实Python中是伪多线程).但是当线程 ...

  6. ASP.NET MVC BundleConfig介绍和使用

    1.BundleConfig介绍: 在创建ASP.NET MVC5项目时,默认在App_Start文件夹中创建了BudleConfig.cs文件. public class BundleConfig ...

  7. 20145316《Java程序设计》实验一：Java开发环境的熟悉(Windows + IDEA)

    20145316<Java程序设计>实验一:Java开发环境的熟悉(Windows + IDEA) 一.DOC命令行下Java程序开发 1.打开cmd,输入 mkdir 20145316命 ...

  8. [Android] 录音与播放录音实现

    http://blog.csdn.net/cxf7394373/article/details/8313980 android开发文档中有一个关于录音的类MediaRecord,一张图介绍了基本的流程 ...

  9. [简明版] 有道云笔记Markdown指南

    使用有道词典配合Markdown,可以快速准确做出美观精致的笔记,下面我们来看一下如何使用有道词典的MarkDown功能. 什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程 ...

  10. tab标签 插件 by 腾讯 jianminlu

    /** * @version 0.1 * @author jianminlu * @update 2013-06-19 15:23 */ (function ($) { /** * @name tab ...