Web框架开发-Ajax(formData)

时间 2019-11-16

标签 web 框架开发 ajax formdata 栏目 HTML 繁體版

原文原文链接

1、回顾上节知识点css

一、什么是json字符串？html

　　轻量级的数据交换格式jquery

二、定时器：关于setTimeoutajax

setTimeout(foo,3000) # 3000表示3秒，foo表示一个函数，3秒后执行foo函数json

<!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>
        .login_error{
            color: red;
        }
    </style>
</head>
<body>

<a href="/get_OK/">点击</a><span class="error"></span>
<hr>
{% csrf_token %}
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $(".Ajax_send").click(function () {
        function foo() {
             $(".login_error").html("");  //3秒后清空
        }
        //方式一
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        });
        // ajax请求
        $.ajax({
            url:"/get_ajax/",  //请求路径
            type:"POST",      //请求方式
            //吧js对象转成json字符串
            data:{
{#                    方式三#}
{#                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#}
                 name:$(":text").val(),
                 pwd:$(":password").val()
            },
            success:function (data) {
                var data=JSON.parse(data);  //js中的反序列化
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){   //为False的状况
                    $(".login_error").html("用户名或者密码错误");
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
</html>

三、ajax的参数补充浏览器

　　 - type不写的话默认是GET服务器

　　- dataType和ContentType：cookie

　　　　dataType: 浏览器发给服务器但愿返回的数据类型。。若是咱们明确地指定目标类型，就可使用data Type。app

　　　　ContentType:
　　　　　　请求头里有：浏览器告诉服务器内容的类型
　　　　　　响应头里也有：服务器响应浏览器的内容dom

四、JS和JQuery对象之间的转换

　　jQuery对象加[0]就转换成了dom对象
　　dom对象加$符就转换成了jquery对象

五、processDate 默认为True ，预处理；若是改成False，不作预处理

2、csrf跨站请求伪造

若是把type:"GET" 改成type:"POST" 会报一个Forbidden的错

解决办法有三种：

方式一：

$.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        });
     注意：要放在ajax请求的前面，在发送以前组装一组字符串，在第一步render的时候就发了
     因此有局限性：
        若是把JS代码放到静态文件中，不会渲染，不会执行{{csrf_token}},只能在HTML页面中使用

方式二：本身组装一组键值对（推荐）

<form>
{% csrf_token %}
</form>
  data:{
        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
        name:$(":text").val(),
        pwd:$(":password").val()
  },

方式三：本身设置头信息

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

 $.ajax({
            url:"/serialize/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
        })

3、jQuery.serialize()

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

serialize()函数经常使用于将表单内容序列化，以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已通过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不须要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不同的是：常规表单通常会提交带有name的按钮控件，而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。

语法：

jQueryObject.serialize( )

　　serialize()函数的返回值为String类型，返回将表单元素编码后的可用于表单提交的文本字符串。

请参考下面这段初始HTML代码：

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

对<form>元素进行序列化能够直接序列化其内部的全部表单元素。　　

// 序列化<form>内的全部表单元素
// 序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

咱们也能够直接对部分表单元素进行序列化。

// 序列化全部的text、select、checkbox表单元素
// 序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

示例：

serialize.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="myForm" action="http://www.365mini.com" method="post">
    <p><input name="uid" type="hidden" value="1"></p>
    <p><input name="username" type="text" value="张三"></p>
    <p><input name="password" type="password" value="123456"></p>
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>
<script src="../static/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $("#btn").click(function () {
        // #方式一#}
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        });
        $.ajax({
            url:"/serialize/",
            type:"POST",
            data:$(":text,:password,:checkbox").serialize(),
            success:function (data) {
                var data = JSON.parse(data)
                console.log(data);
                console.log(typeof data)
                $(".error").html(data);

            }
        })

    })
</script>

</body>
</html>

views.py

def serialize(request):
    name = request.POST.get('username')
    password = request.POST.get('password')
    checked = request.POST.getlist('hobby')

    return HttpResponse(json.dumps(name))

当有不少input的时候，就得一一对应的把全部的数据发过去，这样显得麻烦，咱们用序列化
jQuery.serialize()

data:$("form").serialize(),    //     序列form表单全部的
data:$(":text,:password,:checkbox").serialize(),    // 序列本身选择的



在服务端获取数据
form = request.POST   
print(form)   #获取全部
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)#获取单个

4、上传文件

一、Form表单上传文件

文件和其余的数据类型不同，是一个二进制的形式
Form上传文件的时候切记要加上：enctype="multipart/form-data"

formupload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/formupload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>姓名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>头像：<input type="file" name="file"></p>
    <p><input type="submit" value="提交"> </p>
</form>

</body>
</html>

views.py

def formupload(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        file = request.FILES    # 拿到的是一个句柄
        file_obj = request.FILES.get("file")
        print(file_obj, file_obj.name)
        print(type(file_obj), type(file_obj.name))
        with open(file_obj.name, "wb") as f:
            for i in file_obj:
                f.write(i)

        return HttpResponse("上传成功....")
    return render(request, "formupload.html")

二、Ajax上传文件（利用FormData）：既能够处理二进制，又能够处理字典，列表啊等

FormData是什么呢？

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,咱们能够经过JavaScript用一些键值对来模拟一系列表单控件,咱们还可使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优势就是咱们能够异步上传一个二进制文件.

全部主流浏览器的较新版本都已经支持这个对象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

注意：下文中的几个须要解释的

$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象

要是使用FormData必定要加上：

必定要加上：

　　contentType：false
　　processDate：false #不作预处理

ajaxupload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>姓名：<input type="text" id="username" name="username"></p>
<p>头像：<input type="file" id="avatar" name="avatar"></p>
<p><button class="btn">提交</button><span class="tishi"></span> </p>

<script src="../static/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
    $(".btn").click(function () {
        var formData=new FormData();
        formData.append("username", $(":text").val());
        formData.append("avatar_img",$("#avatar")[0].files[0]);
        $.ajax({
            url:"/get_upload/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:formData,
            contentType:false,  // 不设置内容类型
            processData:false,  // 不处理数据
            success:function (data) {
                $(".tishi").html("上传成功")

            }
        }

        )

    })
</script>

</body>
</html>

　　views.py

def ajaxupload(request):
    return render(request, "ajaxupload.html")

def get_upload(request):
    if request.method == "POST":
        print("FILE:", request.FILES)

        file_obj = request.FILES.get("avatar_img")
        print(file_obj, file_obj.name)
        with open(file_obj.name, "wb") as f:
            for i in file_obj:
                f.write(i)

        return HttpResponse("上传成功")