Django1.7+JQuery+Ajax验证用户注册集成小例子


Posted in jQuery onApril 08, 2017

Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互。 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用。注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在。 截图如下:

Django1.7+JQuery+Ajax验证用户注册集成小例子

Django1.7+JQuery+Ajax验证用户注册集成小例子

页面HTML代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
<title>Ajax验证测试</title>
</head>
<script src="/static/jquery/jquery211.js"></script>
<script> 
$(function(){ 
$("#pu").bind('keydown',function(){
c=$("#pu").val()
$.ajax({
type:"POST",
url:"/ccc/",
data:{name:c},
dataType:"json",
 success: function(data) {
$("#p").text(data.msg)
}
}); 
}) 
}) 
</script>
<body> 
输入名字进行校验:<input id="pu"type="text"> <span id="p"style="color: red"></span>
</body>
</html>

view端的代码,注意csrf的装饰方法,针对post请求:

from django.shortcuts import render
from django.http.response import HttpResponse
# Create your views here.
from django.shortcuts import render_to_response
#导入render_to_response
from django.shortcuts import render_to_response
#导入包装的csrf请求,对跨站攻击脚本做处理
from django.views.decorators.csrf import csrf_exempt
 
import json
 
def tt(request):
 return render_to_response('em/add.html')
 
 
names=list();
names.append("zhangsa")
names.append("aa")
names.append("b")
names.append("c")
 
 
@csrf_exempt
def ccc(request):
 
name=request.POST.get("name",None)
rtxt="";
 if name is not None:
 b=name in names
 if b:
#print("名字已经存在!",name)
rtxt="名字已经存在!"
else:
print("名字不存在!")
rtxt="名字不存在!"
 #print("获取的名字是:NU",name)
 
 return HttpResponse(json.dumps({"msg":rtxt}))

urls里面的代码:

#ajax校验
url(r'^ccc/$',ccc),

注意里面用到了json.dumps函数来生成json对象,注意词典的形式,在测试之前,最后,先访问一下看看,json数据是否能拿到.

Django1.7+JQuery+Ajax验证用户注册集成小例子

ajax验证没有问题之后,我们就可以在前端进行了,测试效果就是散仙开头所截图,本文的重点在于验证ajax的功能调用,所以并没有直接从数据库里面获取数据进行验证,而是使用了list集合,进行了数据的模拟,如果想做的更完美一点,可以把数据库部分实现,这样就与真实中的网站验证场景就一样了。

jQuery 相关文章推荐
简单实现jQuery弹幕效果
May 06 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
You might like
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python中自定义函数的教程
2015/04/27 Python
原生python实现knn分类算法
2019/10/24 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python中Selenium库使用教程详解
2020/07/23 Python
露营世界:Camping World
2017/02/02 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
教育专业个人求职信
2013/12/02 职场文书
倡议书范文
2014/04/16 职场文书
普通党员整改措施
2014/10/24 职场文书
2016年情人节问候语
2015/11/11 职场文书
小学四年级作文之写景
2019/08/23 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python