AJAX与文件上传

ゝ一世哀愁。 2022-03-28 04:40 271阅读 0赞

## 　　一、ajax ##

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

两大特点：

1，异步交互

2，页面局部刷新

语法：

基于jQuery：<br><script><br>$('.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 呈现出来的页面

![1519076-20190109085452265-2145896472.png][]

当我们在名字栏输入数据后并且失去焦点后，就会触发一个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模式打包，数据书写格式为：<br>data：{user:'hh',pwd:123}<br>但当设置contentType='json'，此时数据打包方式就变了，数据必须是json格式，所以现在该如下面这样写<br>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 视图

原文地址：[https://www.cnblogs.com/12345huangchun/p/10243881.html][https_www.cnblogs.com_12345huangchun_p_10243881.html]

[1519076-20190109085452265-2145896472.png]: /images/20220328/a75bc3c96cf146a28ab50340640ae880.png
[https_www.cnblogs.com_12345huangchun_p_10243881.html]: https://www.cnblogs.com/12345huangchun/p/10243881.html