Django实现Ajax异步表单验证

MollyNeko

已于 2022-11-22 14:53:32 修改

阅读量1.2k

点赞数 2

文章标签： django ajax python

于 2018-06-26 00:49:29 首次发布

本文链接：https://blog.csdn.net/qq_38198744/article/details/80809072

版权

环境：windows 10 x64 下的 PyCharm

使用html + jquery实现

吼吼，做个人论坛的时候用到了这个，就做了一个小demo供大家参考一下。

本demo利用Ajax技术实现对登录表单的检验，假设正确的用户名和密码分别是大猫和 123.

成果图：

一、表单页面 index.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function formcheck() {

            let username = $('input[name=username]')[0].value;
            let password = $('input[name=password]')[0].value;

            $.get('/login_check/', {'username': username, 'password': password},
            function (ret) {
                if(ret == 'username'){
                    $('#message').text('用户名不存在！');
                }
                else if(ret == 'password'){
                    $('#message').text('密码错误！');
                }
                else if(ret == 'success'){
                    $('#message').text('登陆成功！');
                }
            });
        }
    </script>
</head>
<body>
    <form action="/login_check/">
        <input type="text" name="username" placeholder="请输入名字" onblur="formcheck()"><br>
        <input type="password" name="password" placeholder="请输入密码" onblur="formcheck()"><br>
        <input type="submit" value="提交">
        <p id="message"></p>
    </form>
</body>
</html>

其中onblur事件是在用户离开输入框后触发,

οnblur="formcheck()"意味着一旦用户离开输入框则触发js的formcheck函数

再来看formcheck函数做了一些什么：

其中 $('input[name=username]') 是一个jquery函数，它捕获了所有name为username的输入框

$('input[name=username]')[0].value 则是获取第一个名字为username的输入框的值

$.get(url, param, function)也是一个jquery函数

1.url是在urls.py文件中映射的一个views.py里的函数

这里的‘/login_check/’调用了Django后台的验证函数

2.param是传递参数，这里是一个字典dict

3.function是异步get获得返回值后将要执行的函数

二、Django的views.py部分代码

from django.shortcuts import render, HttpResponse


# Create your views here.
def login_check(request):

    username = request.GET.get('username')
    password = request.GET.get('password')

    if username != '大猫':
        return HttpResponse('username')
    else:
        if password != '123':
            return HttpResponse('password')
        else:
            return HttpResponse('success')


def index(request):
    return render(request, 'index.html')

三、Django的urls.py文件

from django.contrib import admin
from django.urls import path
from Login.views import login_check, index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
    path(r'login_check/', login_check),
]

一个简单的异步表单验证就完成啦！

MollyNeko

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Django实现Ajax异步表单验证

环境：windows 10 x64 下的 PyCharm使用html + jquery实现吼吼，做个人论坛的时候用到了这个，就做了一个小demo供大家参考一下。本demo利用Ajax技术实现对登录表单的检验，假设正确的用户名和密码分别是大猫和 123.成果图：一、表单页面 index.html 代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt...
复制链接

扫一扫