Django---Ajax上传文件

一、Ajax特点

二、Ajax的请求过程

三、Ajax发get/post请求例子

四、请求头之contentType含义

五、基于form表单和Ajax的文件上传

六、Ajax发送json格式数据

---------------------------------------------------------------------------

一、Ajax特点

回顾一下：前端可以通过哪些途径给服务器发请求？
1、浏览器地址栏，默认是get请求
2、form表单：get请求/post请求
3、a标签，默认是get请求
4、Ajax请求，get/post
两个特点：1 异步请求 2 局部刷新

二、Ajax的请求过程

要把Ajax请求绑定到某事件里，因为是js发的

$(".Ajax").click(function(){
    $.ajax({
        //请求url,IP:Port不写是当前页面的ip+port
        url:"/test_ajax/",     
        type:"get", //请求方式，可以是post
        //success是回调函数,对浏览器返回的data进行处理
        //data:返回的响应体的内容
        success:function(data){  
            console.log(data)
        }
    });
});

请求过程：

 三、Ajax发get/post请求例子

1、ajax发送get请求：
$(function(){
　　$.ajax({
        //请求url,IP:Port不写是当前页面的ip+port
　　　　url:'/test_ajax/',
　　　　type:'get',
        //请求参数，放在路径的？后面
        data:{a:1, b:2},
        //成功之后调用，data是响应体内容
　　　　success:function(data){
　　　　　　console.log(data);
　　　　　　$('body').html(data);
　　　　},
　　　　error:function(err){console.log(err);} //出错打印err信息
　　});
});

2、ajax请求json数据。服务器端用HttpJson返回
$(function(){
　　//指定返回数据的类型
　　$.ajax({
　　　　url:'/test_ajax/',
　　　　type:'get',
　　　　dataType:'json',//设置返回的数据的数据类型为json
　　　　success:function(data){
　　　　　　console.log(data.name);
　　　　　　$('.box').text(name);
　　　　},
　　　　error:function(err){console.log(err);}
　　});
});


3、ajax发送post请求：（会被Django的CSRF阻止，后面说怎么处理）
$(function(){
　　$.ajax({
　　　　url:'/test_ajax/',
　　　　type:'post',
　　　　data:{
　　　　 "name":"alex",
        "pwd":"123"

　　　　 "csrfmiddlewaretoken":$('input[name="csrfmiddlewaretoken"]').val()

　　　　},
　　　　success:function(data){
　　　　    console.log(data);
　　　　},
　　　　error:function(err){console.log(err);}
　　});
});

 四、请求头之contentType含义

------------------------------------------------
请求头之contentType：指定请求的编码格式
常见的三种值
1.contentType="application/x-www-form-urlencoded"
不写都是默认这种格式，告诉服务端：请求体数据会以键值对方式提交：a=1&b=2&c=3
服务端放在request.POST 由request.body解析而来
2.enctype="multipart/form-data"
这是文件上传的编码格式
服务端放在request.FILES
3.enctype="application/json"
这是告诉服务端：请求体的数据是json格式 '{a=1,b=2,c=3}'
服务端放在request.body 这是元数据,存请求报文中的请求体,先解码,再反序列化
-------------------------------------------------

五、基于form表单和Ajax的文件上传

1、基于form表单的文件上传
form表单里要加：enctype="multipart/form-data"

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

views视图函数：

request.FILES #文件存放在这里
file_obj = request.FILES.get("file")
with open(file_obj.name, "wb") as f:
　　for line in file_obj:
　　　　f.write(line)

2、基于ajax的文件上传
<form action="" method="post">
用户名 <input type="text" id="user">
文件 <input type="file" id="file">{% csrf_token %}
<input type="button" values="上传">
</form>

$("#file").change(function () {
    //这个要构建formdata对象,相当于定义contentType=multiform
    var formdata = new FormData();
    //ajax取文件对象固定写法:$("#file")[0].files[0]
    formdata.append("file", $(this)[0].files[0]);
    formdata.append("csrfmiddlewaretoken",
        $('input[name="csrfmiddlewaretoken"]').val());
    $.ajax({
        url: "{% url 'customer_import' %}",
        type: 'post',
        // 用这个就要固定加上面两个false参数
        contentType: false,
        processData: false,
        data: formdata,
        success: function (data) {
            console.log(data);
        }
        ,
        error: function (err) {
            console.log(err);
        }
    });
})

六、Ajax发送json格式数据

ajax发json格式数据，指定contentType:"application/json"

$(function(){
　　$.ajax({
　　　　url:'/test_ajax/',
　　　　type:'post',
contentType:"application/json",
data:JSON.stringfy({
a:1,
b:2
}),
　　　　success:function(data){
　　　　　　console.log(data);
　　　　},
　　　　error:function(err){console.log(err);}
　　});
});