ajax与文件上传 - Python

TOP

ajax与文件上传(一)

2019-01-09 14:09:04 【大中小】浏览:190次

　　一、ajax

　　ajax（Asynchronous java script And XML）：异步java script和XML，即使用java script语句与服务器进行异步交互，传输的数据为XML（也可以是json数据）。实际上就是在java script语句里用ajax可以向服务器发送请求。

　　两大特点：

　　1，异步交互

　　2，页面局部刷新

　　语法：

基于jQuery：
<script>
$('.cc').click(function(){        #当我们点击‘.cc’这个类的时候就会触发ajax请求
 $.ajax({
               url:'/name/',      #请求的路径
               type:'post',       #请求的方式
               data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()},          #请求的数据
               success:function (data) {                        #这是请求成功后的回调函数
                   if (data.name){
                       $('.c1').html('用户名已存在');
                       $('.login').addClass('hide')
                   }
               }
           })
           });
</script>

　　1，基于ajax请求的注册页面

　　1.1 register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
</head>
<body>
{% csrf_token %}
<div class="container">
    {% csrf_token %}
    <div class="row">
        <div class="col-md-5">
            <div style="color: blue;font-size: 20px">注册页面</div>
            <div>
                名字 <input type="text" name="user" class="form-control"><span class="c1" style="color: red"></span>
            </div>
            <div >
                密码 <input type="password" name="pwd" class="form-control"><span class="c2" style="color: red"></span>
            </div>
            <button class="register">注册</button>
        </div>
    </div>
</div>
    <script>
        $('[name="user"]').focus(function () {
            $('.c1').html('');
            $('.register').removeClass('hide')
        });
        $('[name="pwd"]').focus(function () {
            $('.c2').html('');
            $('.register').removeClass('hide')
        });
       $('[name="user"]').blur(function () {
           $.ajax({
               url:'/name/',
               type:'post',
               data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()},
               success:function (data) {
                   if (data.name){
                       $('.c1').html('用户名已存在');
                       $('.register').addClass('hide')
                   }
               }
           })
           });
        $('[name="pwd"]').blur(function () {
            var pwd=$(this).val();
            if (pwd.length < 10){
                $('.c2').html('长度小于10');
                $('.register').addClass('hide')
            }
           });
        $('.register').click(function () {
            var name = $('[name="user"]').val();
            var pw = $('[name="pwd"]').val();
            $.ajax({
                url: '/registr/',
                type: 'post',
                data: {csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(), user: name, pwd: pw},
                success: function (data) {
                    if (data.state) {
                        location.href = '/login/'
                    }
                    else {
                        $('p').html('注册不成功')
                    }
                }
            })
        })
    </script>
</body>

　　1.2 views.py

def registr(request):
    if request.method=='GET':
        return render(request, 'registr.html')
    else:
        dic={'state':None}
        name=request.POST.get('user')
        pwd=request.POST.get('pwd')
        obj=UserInfo.objects.create(name=name,pwd=pwd)
        if obj:
            dic['state']=True
        return JsonResponse(dic)


de

首页上一页 1 2 下一页尾页 1/2/2
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：Python多版本情况下快速进入交互..	下一篇：英语学习自测神器——用python爬..