django-自动验证账号-连接转圈-头像上传-回显-写入表格

自动验证账号-连接转圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    {% load static %}
    <script src="{% static 'jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'jquery.cookie.js' %}"></script>
    <script>
        $(function () {
            userds=document.getElementsByName('userd')[0]
            userds.onblur=function () {
                if(userds.value==''){
                 $('span').text('请输入用户名');
                 userds.focus();
                }else {
                    $('span').text('');
                    $.ajax({
                        async:true,
                        url:"/goajax/"+ userds.value +"/",
                        type:'post',
                        headers:{'X-CSRFTOKEN':$.cookie('csrftoken')},
                        beforeSend:function () {
                            $('#img').show();
                        },
                        complete:function () {
                            $('#img').hide();
                        },
                        success:function (data) {
                            if (data=='true'){
                                $('span').text('恭喜通过');
                                $('span').css({"color":"green"});

                            }else {
                                $('span').text('用户已占用');
                                $('span').css({"color":"red"});
                            }
                        }
                    });
                }
            }

        });
    </script>
</head>
<body>
<h3>异步验证注册</h3>
<form method="post" >

<input type="text" name="userd" placeholder="请输入用户名"><img src="{% static 'loading.gif' %}" width="30" id="img" style="display: none">
<span></span><br>
<input type="password" name="passd" placeholder="请输入密码">
<input type="submit" value="regs">
</form>
</body>
</html>
from django.shortcuts import render
from django.http import HttpResponse

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

    return render(request,"regd.html")
def goreg2(request):

    return render(request,"regd2.html")


def goajax(request,username):
    usernames=['zhangsan','lisi']
    flag='true'
    print(username)
    if username in usernames:
        flag='false'
    import time
    time.sleep(2)
    return HttpResponse(flag)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    {% load static %}
    <script src="{% static 'jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'jquery.cookie.js' %}"></script>
    <script>
        $(function () {
            userds=document.getElementsByName('userd')[0]
            userds.onblur=function () {
                if(userds.value==''){
                 $('span').text('请输入用户名');
                 userds.focus();
                }else {
                    $('span').text('');
                    $.ajax({
                        async:true,
                        url:"/goajax/"+ userds.value +"/",
                        type:'post',
                        headers:{'X-CSRFTOKEN':$.cookie('csrftoken')},
                        beforeSend:function () {
                            $('#img').show();
                        },
                        complete:function () {
                            $('#img').hide();
                        },
                        success:function (data) {
                            if (data=='true'){
                                $("#headd").text('恭喜通过');
                                $("#headd").css({"color":"green"});

                            }else {
                                $("#headd").text('用户已占用');
                                $("#headd").css({"color":"red"});
                            }
                        }
                    });
                }
            }
            $("#picfile").change(function () {
                var form_data=new FormData();
                var file_info=$("#picfile")[0].files[0];
                form_data.append("file",file_info);
                $.ajax({
                    async:true,
                    url:"/picload/",
                    type:"post",
                    headers:{'X-CSRFTOKEN':$.cookie('csrftoken')},
                    data:form_data,
                    processData:false,
                    contentType:false,
                    success:function (data) {
                        flagdata=data.split(":")
                        if (flagdata[0]=='true'){
                            $("#head").text('上传成功');
                            $("#head").css({"color":"green"});
                            document.getElementById('hh').src=flagdata[1]
                        }else {
                            $("#head").text('文件不否合类型');
                            $("#head").css({"color":"red"});
                        }

                    }
                });

            });

        });
    </script>
</head>
<body>
<h3>异步验证注册</h3>
<form method="post" action="/regss/">
{% csrf_token %}
<input type="text" name="userd" placeholder="请输入用户名"><img src="{% static 'loading.gif' %}" width="30" id="img" style="display: none">
<span id="headd"></span><br>
<input type="password" name="passd" placeholder="请输入密码"><br>
    <input type="file" id="picfile"><span id="head"></span><br>
    <img src="{% static 'default-user.png' %}" id="hh" width="50"><br/>
<input type="submit" value="regs">
</form>
</body>
</html>
def regdd(request):

    return render(request,'regdtupian.html')

def picload(request):
    file=request.FILES.get("file")
    print('文件信息')
    filename=file.name
    filetype=filename.split(".")[-1]
    print("文件名:{0}".format(filename))
    print("文件类型:{0}".format(filetype))
    print("文件大小:{0}".format(file.size))
    alltype=["jpg","gif","png","bmp"]
    flag="true"
    if filetype in alltype:
        uploadpath="app/static/img"
        if not os.path.exists(uploadpath):
            os.mkdir(uploadpath)

        uploadname=str(uuid.uuid1())+"."+filetype
        path=uploadpath+os.sep+uploadname
        with open(path,"wb+") as fp:
            for chunk in file.chunks():
                fp.write(chunk)
        global filepath
        filepath="/static/img/"+uploadname
        return HttpResponse("{0}:{1}".format(flag,filepath))
    else:
        flag='false'
        return HttpResponse("{0}:{1}".format(flag,flag))



def regss(request):
    username=request.POST.get("userd")
    userpass = request.POST.get("passd")
    print(username)
    print(userpass)
    print(filepath)
    return HttpResponse("恭喜注册成功")

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <title>Title</title>

    <script></script>
</head>
<body>
<h2>水果表格</h2>
<table border="1">
    <tr>
        <td>水果名称</td>
    </tr>
    {% for i in listd %}
    <tr>
        <td>{{ i }}</td>
    </tr>
    {% endfor %}
</table>
{% for k in listd2 %}

    {{ k.name }}

{% endfor %}

<br>

{% for k,v in listd3.items %}

    {{ k }}{{ v }}

{% endfor %}

</body>
</html>
def mobandd(request):
    listd=['苹果','橘子','香蕉']
    listd2=[{'name':'百度'},{'name':'新浪'}]
    listd3 = [{'name': '百度'}, {'name': '新浪'}]
    listd3={'name':'百度'}
    return render(request,'moban1.html',{'listd':listd,'listd2':listd2,'listd3':listd3})
原文地址:https://www.cnblogs.com/huazhou695/p/10026707.html