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实现拼图小游戏(实例讲解)
Jul 24 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery弹框插件使用方法详解
May 26 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
react的hooks的用法详解
2020/10/12 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
基于python 取余问题(%)详解
2020/06/03 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
公司门卫的岗位职责
2014/02/19 职场文书
超市开店计划书
2014/09/15 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
自我工作评价范文
2015/03/06 职场文书
致青春观后感
2015/06/09 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis