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

更新时间：2017年04月08日 22:23:23 投稿：mdxy-dxy

下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时，用户名存在不存在的一个小应用。注意，验证存在不存在使用的是Ajax的方式，不用让用户点击按钮验证是否存在,需要的朋友可以参考下

Ajax的出现让Web展现了更新的活力，基本所有的语言，都动态支持Ajax与起服务端进行通信，并在页面实现无刷新动态交互。下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时，用户名存在不存在的一个小应用。注意，验证存在不存在使用的是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数据是否能拿到.

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

您可能感兴趣的文章:

JS中call/apply、arguments、undefined/null方法详解
这篇文章主要介绍了JS中call/apply、arguments、undefined/null方法详解的相关资料,需要的朋友可以参考下
2016-02-02
arctext.js实现文字平滑弯曲弧形效果的插件
这篇文章主要介绍了arctext.js实现文字平滑弯曲弧形效果的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
浅谈layui使用模板引擎动态渲染元素要注意的问题
今天小编就为大家分享一篇浅谈layui使用模板引擎动态渲染元素要注意的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js点击任意区域弹出层消失实现代码
这篇文章主要为大家详细介绍了js点击任意区域弹出层消失实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JS实现图片延迟加载并淡入淡出效果的简单方法
我们大家都知道，对于一个网站最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，作为一个站长我们是千方百计的使用各种技巧来优化图片，但其实有一种简单的方法，只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果，下面一起来看看。
2016-08-08
JS中append字符串包含onclick无效传递参数失败的解决方案
这篇文章主要介绍了JS中append字符串包含onclick无效传递参数失败的解决方案,需要的朋友可以参考下
2016-12-12
js parentElement和offsetParent之间的区别
这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
2010-03-03
分页栏的web标准实现
分页栏是网页上最常见不过的一个组件，本博文给出分页栏的一个web2.0标准示例，并作简要分析
2011-11-11
Div自动滚动到末尾的代码
非常不错的思路，自动滚动到div末尾
2008-10-10
一文让你彻底弄懂js中undefined和null的区别
JavaScript是一门动态类型语言,元素除了表示存在的空值外,还有可能根本就不存在,这就是undefined存在的原因,这篇文章主要给大家介绍了关于undefined和null区别的相关资料,需要的朋友可以参考下
2022-03-03