Ajax进阶

"POST":请求

POST请求：(一共三个方法)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

<p>姓名：<input type="text" ></p>
<p>密码：<input type="password" ></p>
<button class="cc">提交</button><span class="error"></span>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    function foo() {
    $(".error").html("")
}
    $(".cc").click(function () {
          // 方式1：
          $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
          });
        $.ajax({
            url:"/get_ajax/",
            type:"POST",
   #方法三：
    headers:{"X-CSRFToken":$.cookie('csrftoken')},#需要引入<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
            data:{
   #方法二：
      csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#需要加上Form表单和{% csrf_token%},

               name:$(":text").val(),
               pwd:$(":password").val(),
            },    // 请求数据，是js数据    ?name=yuan&pwd=123
            #这里的采用默认的数据发送格式
            success:function (data) {
                var data=JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){
                    $(".error").html("用户名或者密码错误"),
                        setTimeout(foo,10000)

                }
            }
        })

})

</script>

</body>

文件上传：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>

<form action="" method="post"  enctype="multipart/form-data">#一定要加上这个方法enctype
    {% csrf_token %}
    <p>姓名：<input type="text" name="user"></p>
    <p>文件：<input type="file" name="avatar"></p>
    <p><input type="submit"></p>
</form>
</body>
</html>

html

views函数

def upload(request):
    if request.method=="GET":
        return render(request,"load.html")
    if request.method=="POST":
        print("POST",request.POST)
        print("FILES",request.FILES)
        file_obj=request.FILES.get("avatar")
        file_obj=request.FILES.get("upload_avatar")
        with open(file_obj.name,"wb") as f:#上传文件
            for i in file_obj:
                f.write(i)
        print(file_obj)
        return  HttpResponse("上传成功")

View Code

formdata上传文件：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    {% csrf_token %}
<form action="" method="post">

    <p>姓名：<input type="text"></p>
    <p>密码：<input type="password"></p>
    <p>头像：<input type="file" id="upload_avatar"></p>
    <button class="cc">提交</button><span class="error"></span>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
<script>
    function foo() {
    $(".error").html("")
}
    $(".cc").click(function () {
          var formdata=new FormData();
             formdata.append("username",$(":text").val());
             formdata.append("password",$(":password").val());
             formdata.append("avatar",$("#upload_avatar")[0].files[0]);
        $.ajax({
            url:"/upload/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:formdata,
            contentType:false,
            processData:false,
            success:function (data) {
                var data=JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){
                    $(".error").html("用户名或者密码错误"),
                        setTimeout(foo,10000)
                }
            }
        })
    })
</script>
</body>
</html>

View Code

views函数

def upload(request):
    if request.method=="GET":
        return render(request,"load.html")
    if request.method=="POST":
        print("POST",request.POST)
        print("FILES",request.FILES)
        # file_obj=request.FILES.get("avatar")
        # file_obj=request.FILES.get("upload_avatar")
        # with open(file_obj.name,"wb") as f:#上传文件
        #     for i in file_obj:
        #         f.write(i)
        # print(file_obj)
        return  HttpResponse("上传成功")

View Code