Django + ajax

最新推荐文章于 2025-06-13 10:47:12 发布

原创最新推荐文章于 2025-06-13 10:47:12 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #django

django 同时被 2 个专栏收录

7 篇文章

订阅专栏

网站

7 篇文章

订阅专栏

本文介绍了一种使用Ajax实现在用户输入用户名时实时检查用户名是否已存在于数据库的方法。通过编写前端JavaScript代码并结合Django后端实现，无需刷新页面即可提示用户姓名的可用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

很多地方要用到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>

是不是很详细~~