需求分析

  • 页面中给出注册表单；
  • 在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. 以EJB谈J2EE规范

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiaoduishenghuogo/article/details/24800703 接触J2EE的时 ...

  2. mysql监控优化（三）慢查询

    顾名思义,慢查询日志中记录的是执行时间较长的query,也就是我们常说的slowquery,通过设--log-slow-queries[=file_name]来打开该功能并设置记录位置和文件名.慢查询 ...

  3. PAT 1093 Count PAT's[比较]

    1093 Count PAT's (25 分) The string APPAPT contains two PAT's as substrings. The first one is formed ...

  4. PAT 1036 Boys vs Girls[简单]

    1036 Boys vs Girls (25 分) This time you are asked to tell the difference between the lowest grade of ...

  5. SqlAlchemy 中操作数据库时session和scoped_session的区别(源码分析)

    原生session: from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalch ...

  6. Django：学习笔记(6)——模型

    Django:学习笔记(6)——模型 快速上手 模型到底是什么呢?我们可以想,如果一张数据表的各个字段可以自动映射到一个类的各个属性,则每条记录对应这个类的一个对象.那我们通过类方法来操作对象(即表记 ...

  7. bootstrap常用知识点总结

    api地址:https://v3.bootcss.com/css/#forms 栅格参数: bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏 幕 大小 把屏 幕分 ...

  8. Mysql 压力测试工具 mysqlslap

    转载至文章作者:杜亦舒 链接:https://www.sdk.cn/news/4512 来源:SDK.cn 摘要:mysqlslap 是 Mysql 自带的压力测试工具,可以模拟出大量客户端同时操作数 ...

  9. Uvalive 7037 The Problem Needs 3D Arrays（最大密度子图）

    题意:给一段子序列,定义密度:子序列中的逆序对数/子序列的长度 求这个序列的对大密度. 分析:将序列中的每个位置视作点,逆序对\(<i,j>\)之间表示点i与点j之间有一条无向边.所以就转 ...

  10. TOSCA自动化测试工具--Log defect

    1.执行完用例后,对于失败的用例进行分析,如果有缺陷,可以提对应的缺陷 2.在issues模块, 右键创建自己需要的文件夹,然后在文件夹上右键找到虫子图形点下,就可以创建缺陷了,填上对应的内容 3.如 ...