您的位置：首页 > 编程语言 > Go语言

Django + ajax

2016-08-06 16:08 316 查看

标签（空格分隔）：未分类

很多地方要用到ajax，还是要做一下的

我想了一下思路：

比如说，我们就只做一个判断输入用户名的时候，不用刷新，在前端提示该用户是不是在数据库里的功能；

实现方法肯定是，我们写进输入框，然后焦点离开输入框之后，用ajax把输入框的内容传到后台，然后验证之后返回一个状态标识（用户名是否存在数据库的标识）

然后我们就可以写出

首先简单写一个表单做示例

<form action="" method="post">
{% csrf_token %}
用户名: <input name="username" id="username" />
<br>
<p id="hint"></p>
<br>
<input type="submit" value="提交">
</form>

接着是js函数

<script type="text/javascript"
src='{% static 'scripts/jquery-2.2.0.js'%}'>
</script>
<script>
$(document).ready(function(){
$("#username").blur(function(){
var uname = $("#username").val();
$.get("/find",{'username':uname}, function(ret){
$('#hint').html(ret);
})
});

});
</script>

应该不难理解吧

- blur函数是jQuery的焦点离开的触发函数；

- ‘/find’是我们在Django后台定义的路由，我们在urls.py里如下定义：

from User.views import find
urlpatterns = [
# ...其他url
url(r'^find$', find, name='find'),
]

然后后台实现find函数如下(因为我们这里是通过url传参，函数的参数表并不用定义，访问到这个函数的url格式是‘/find?username=…’)：

def find(request):
user_name = request.GET['username']
try:
user = User.objects.get(user_name = user_name)
return HttpResponse("exist")
except:
return HttpResponse("not exist")

上述几步应该就可以实现功能了

以下的是讲如何将上述功能整合到一个公共模块，然后子页面调用，大家想看就看。

思路：

我们可以把js函数写到check.html（公共模板）里，但是如果这样的话，因为我们的函数是通过前端控件的id来处理动作，那么，我们在继承的时候，所有前端控件的id都必须相同，我们就假设所有用到该功能的输入框为id = ‘username’；

我们写一个check.html放到Django的公共模板(公共的templates文件夹)里：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block script %}
{% load staticfiles %}
<script type="text/javascript"
src='{% static 'scripts/jquery-2.2.0.js'%}'></script>
<script>
$(document).ready(function(){
$("#username").blur(function(){
var uname = $("#username").val();
$.get("/find",{'username':uname}, function(ret){
$('#hint').html(ret);
})
});

});
</script>
{% endblock%}

</head>
<body>
{% block body %} body {% endblock %}
</body>
</html>

然后我们的表单的html就是

<!DOCTYPE html>
{% extends "check.html" %}
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
{% block body %}

<h1>This is test!</h1>
<form action="" method="post">
{% csrf_token %}
用户名: <input name="username" id="username" />
<br>
<p id="hint"></p>
<br>
<input type="submit" value="提交">
</form>

{% endblock %}
</body>
</html>

是不是很详细~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax django

相关文章推荐

新的分享

章节导航