django新手村10-----关於注册

上一篇用到的注册，其实是有点小问题的，像是如果用户名重复了，或是帐号密码都不打也可以注册

这一篇比较注重jquery，可能比较难?大概说说概念

当用户名重复，最简单的方法就是直接刷新，但是这样用户会觉得莫名其妙，刚刚打的资料都白打了

所以要在html添加jquery预处理判断是否已有该用户名称，如果有button就继续无法使用，如果没有，就会让button可以点击

$.getJSON('../check/',{'username':username}, function(data)
第一个变数是url，第二个是传直到url(get方式)，第三个是那个url回传的值
check必须要使用JsonResponse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   
    <script>
    
    $(document).ready(function(){
        
        var name = $("#name");

        name.on({
        blur:function(){
            console.log(name.val().trim())
            var username = name.val().trim()

            if (username.length){
                
                $.getJSON('../check/',{'username':username}, function(data){
                    
                    console.log(data)
                    if (data['check']){
                        $("#hint").html('ok').css('color','green');
                        $('#btn').attr('disabled',false);
                    }
                    else{
                        $("#hint").html('wrong').css('color','red')
                    }
                    
                })
                
            }
            }          
        })

    })

    </script>
    
</head>
<body>
    <form action="{% url 'three:doregister'%}" method="post">
<!--        {% csrf_token %}-->
        <span>username: <input type="text" name="username" id="name"></span>
        <br>
        <span id="hint"> </span>
        <br>
        <span>password: <input type='password' name="password" required></span>
        <br>
        <button disabled='disabled' id="btn">register</button>
        
    </form>
</body>
</html>

views.py

def check(request):

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

    person = Person.objects.filter(name=username).first()

    if person:
        return JsonResponse(data={'check': False})

    return JsonResponse(data={'check': True})

<<: [DAY3]SQL新手的懒人笔记

>>: Java学习之路08---方法