AJAX与文件上传

  一、ajax

  ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可以是json数据)。实际上就是在JavaScript语句里用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)def name(request): dic={‘name‘:None} name=request.POST.get(‘user‘) obj=UserInfo.objects.filter(name=name).first() if obj : dic[‘name‘]=True return JsonResponse(dic)

  1.3 呈现出来的页面

  当我们在名字栏输入数据后并且失去焦点后,就会触发一个ajax请求,它会把写在名字栏的数据发到服务器,服务器从数据库判断是否用户名已经存在,然后给ajax返回一个结果。这整个过程中,页面是不会刷新的。只是通过JavaScript在页面上添加节点而已

  二、文件上传

  1,请求头contentType:指的请求体的打包方式,总共有三种类型

  1.1 application/x-www-form-urlencoded

  这是post请求方式最常见的打包方式,如果不进行设置,都会默认这种打包方式。浏览器的原生form表单,如果不设置enctype属性,就默认这种方式打包数据。

user=alex&pwd=123 这就是这种方式打包后的数据结构

  1.2 multipart/from-data

  基于form表单上传文件,就必须让form表单的enctype等于multipart/form-data

  基于ajax上传文件时,我们就要用到Formdata类

$(‘.submit‘).click(function () { var formdata=new FormData(); formdata.append(‘file‘,$(‘.file‘)[0].files[0]); #插入上传文件的内容 $.ajax({ url:‘/file/‘, type:‘post‘, contentType:false, #这一句和下一句是必须加上的 processData:false, data:formdata, success:function (data) { $(‘.c1‘).html(data) } }) })

  1.3 application/json

  在用ajax请求时,可以把contentType改成json,但此时的数据类型就必须json数据类型

如果不用Json类型打包的话,ajax也会默认urlencoded模式打包,数据书写格式为:
data:{user:‘hh‘,pwd:123}
但当设置contentType=‘json‘,此时数据打包方式就变了,数据必须是json格式,所以现在该如下面这样写
data:JSON.strinigfy({user:‘hh‘,pwd:123})

  2,基于form表单的文件上传

  2.1 HTML文件

<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="file"> <input type="submit"> </form>

  2.2 视图

def file(request): if request.method==‘GET‘: return render(request,‘file.html‘) else: file_obj=request.FILES.get(‘file‘) name=file_obj.name with open(os.path.join(‘imgs‘,name),‘wb‘) as f: for line in file_obj: f.write(line) return HttpResponse(‘上传成功‘)

  3,基于ajax的文件上传

  3.1 HTML文件

 <input type="file" class="file"> <input type="button" class="submit" value="submit"> <p class="c1"></p> <script> $(‘.submit‘).click(function () { var formdata=new FormData(); formdata.append(‘file‘,$(‘.file‘)[0].files[0]); $.ajax({ url:‘/file/‘, type:‘post‘, contentType:false, processData:false, data:formdata, success:function (data) { $(‘.c1‘).html(data) } }) }) </script>

  3.2 视图

def file(request): if request.method==‘GET‘: return render(request,‘file.html‘) else: file_obj=request.FILES.get(‘file‘) name=file_obj.name with open(os.path.join(‘imgs‘,name),‘wb‘) as f: for line in file_obj: f.write(line) return HttpResponse(‘上传成功‘)

相关文章