django框架ajax - 爱码网

参考博文https://www.cnblogs.com/yuanchenqi/articles/9070966.html
简单示例：
file_put文件上传页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>
<body>

<h3>简单的form</h3>

<form action="" method="post">
    用户名<input type="text" name="user">
    密码<input type="password" name="pwd">
    <input type="submit">
</form>

<h3>基于form表单的文件上传</h3>

<form action="" method="post" enctype="multipart/form-data">  上传文件必须添加：
     用户名<input type="text" name="user">
     头像  <input type="file" name="avatar">
    <input type="submit">
</form>

<h3> 基于Ajax文件上传</h3>

<form action="" method="post">
    用户名<input type="text" id="user">
    头像  <input type="file" id="avatar">
    <input type="button" class="btn" value="Ajax">
</form>

<script>

{##}
{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            contentType:"application/json",#}   // json数据串request.body中有数据，POST中没有数据
{#            data:JSON.stringify({#}
{#                a:1,#}
{#                b:2#}
{#            }),#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{##}
{##}
{#    })#}
{#    #}


{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            data:{#}
{#                a:1,#}
{#                b:2#}
{#            },#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{#    })#}


    // ajax上传文件
    $(".btn").click(function(){

        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);

        $.ajax({
            url:"",
            type:"post",
            contentType:false, //编码格式
            processData:false, //数据不做预处理
            data:formdata,  //因为是formdata数据所以上面添加参数contentType、processData
            success:function(data){
                console.log(data)
            }
        })
    })
</script>

</body>
</html>
View Code