ajax实现用户注册
需求分析
- 页面中给出注册表单；
- 在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实现用户注册的更多相关文章
- ajax写用户注册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax——用ajax写用户注册
zhuce.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 使用ajax对用户注册时，用户名进行检验
package cn.hopetesting.com.servlet;import com.fasterxml.jackson.databind.ObjectMapper;import javax.p ...
- Ajax+Struts2用户注册功能实现
详细请参考源码(Github):https://github.com/QQ3330447288/ajaxRegister 1.目录结构 2.截图 3.核心代码: register.jsp <sc ...
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...
- $.ajax和vue-resource实现OAuth
Vue.js——使用$.ajax和vue-resource实现OAuth的注册.登录.注销和API调用 概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST A ...
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
转自:https://www.cnblogs.com/keepfool/p/5665953.html 概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST AP ...
- 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
- WEB框架Django之Form组件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一 通过form实现校验字段功能 模型:mod ...
随机推荐
- Java集合—集合框架
前言 在Java语言中,Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(具体实现接口的类).所有抽象出来的数据结构和操作(算法)统称为Java集合框架(JavaCollectio ...
- 【HTML5 localStorage本地储存】简介&基本语法
了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...
- CanvasRenderingContext2D.lineDashOffset
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset CanvasRende ...
- 6 TensorFlow实现cnn识别手写数字
------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...
- SCADA 必备函数之 ：关于消息的函数
Message Functions BroadcastSystemMessage//是将一条系统消息广播给系统中所有的顶级窗口. BroadcastSystemMessageEx//将消息发送到指定的 ...
- vue Element-ui 表格自带筛选框自定义高度
el-table中可以在一行的某列进行筛选,代码如下: <el-table-column prop="classOfTest" class="test" ...
- Hadoop RPC实例
本文发表于本人博客. 上次写了个hadoop伪分布环境搭建的笔记了,今天来说下hadoop分布式构建的基础RPC,这个RPC在提交Job任务的时候底层就是创建了RPC来实现远程过程调用服务端. 我们首 ...
- 27TCP
TCP通信流程步骤: 服务端: 等待(被动)接收发送 1: 创建 socket: socket() 2: 绑定端口: bind() 3: 监听端口: listen() 4: 接受 ...
- windows7上安装php7和apche2.4
windows7在配置php7+apache2.4 1.下载并安装vc14http://www.microsoft.com/zh-cn/download/details.aspx?id=48145下载 ...
- Django学习笔记之URL标签的使用
期初用django 开发应用的时候,完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRedirect()也是硬编码转向地址,当然在template 中也是一样了, ...