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弹窗效果
Oct 30 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery插件实现轮播图效果
Oct 19 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横向重复区域显示二法
2008/09/25 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
用 JSON 处理缓存
2007/04/27 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
食堂员工工作职责
2013/12/18 职场文书
项目工作说明书
2014/07/29 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
民主评议党员总结
2014/10/20 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS