• Django【第21篇】:Ajax之FormData


    ajax补充--------FormData等...

    一、回顾上节知识点

    1、什么是json字符串?

      轻量级的数据交换格式

    2、定时器:关于setTimeout

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

    复制代码
    <!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>
    复制代码

    3、ajax的参数补充

       - type不写的话默认是GET

      - dataType和ContentType:

        dataType: 浏览器发给服务器希望返回的数据类型 。。如果我们明确地指定目标类型,就可以使用data Type。

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

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

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

    5、processDate 默认为True ,预处理;     如果改为False,不做预处理

    二、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')}, })
    复制代码

    三、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() );

    示例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width">
     7     <title>Title</title>
     8 </head>
     9 <body>
    10 <form name="myForm" action="http://www.365mini.com" method="post">
    11     <input name="uid" type="hidden" value="1" />
    12     <input name="username" type="text" value="张三" />
    13     <input name="password" type="text" value="123456" />
    14     <select name="grade" id="grade">
    15         <option value="1">一年级</option>
    16         <option value="2">二年级</option>
    17         <option value="3" selected="selected">三年级</option>
    18         <option value="4">四年级</option>
    19         <option value="5">五年级</option>
    20         <option value="6">六年级</option>
    21     </select>
    22     <input name="sex" type="radio" checked="checked" value="1" />23     <input name="sex" type="radio" value="0" />24     <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    25     <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    26     <input name="hobby" type="checkbox" value="3" />羽毛球
    27     <input name="btn" id="btn" type="button" value="点击" />
    28 </form>
    29 <script src="/static/jquery-3.2.1.min.js"></script>
    30 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    31 <script>
    32     $("#btn").click(function () {
    33 {#        方式一#}
    34         //$.ajaxSetup({
    35           // data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
    36         //});
    37         $.ajax({
    38             url:"/serialize/",
    39             type:"POST",
    40 {#            方式三#}
    41             headers:{"X-CSRFToken":$.cookie('csrftoken')},
    42             //data:$("form").serialize(),   //序列form表单所有的
    43             data:$(":text,:password,:checkbox").serialize(),  //序列自己选择的
    44             success:function (data) {
    45                 var data=JSON.parse(data);  //js中的反序列化
    46                 console.log(data);
    47                 console.log(typeof data);
    48                 $(".error").html(data);
    49             }
    50         })
    51     })
    52 </script>
    53 </body>
    54 </html>
    serialize.html
    1 def serialize(request):
    2     # form = request.POST
    3     # print(form)
    4     name = request.POST.get("username")
    5     password = request.POST.get("password")
    6     checked = request.POST.getlist("hobby")
    7     print(name,password,checked)
    8     return HttpResponse(json.dumps(name))
    View Codef
    复制代码
    当有好多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)#获取单个
    复制代码

    四、上传文件

    1、Form表单上传文件

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

    formupload.html

    复制代码
    <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>
    复制代码

    view.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))   #<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>   <class 'str'>
            with open(file_obj.name,"wb") as f:
                for i in file_obj:
                    f.write(i)
            return HttpResponse("上传成功...")
        return render(request,"formupload.html")
    复制代码

    2、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">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <title>Title</title>
    </head>
    <body>
    <p>姓名<input type="text" name="username"></p>
    <p>头像<input type="file" id="upload"></p>
    <p><button class="btnnn">提交</button><span class="tishi"></span></p>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
        $(".btnnn").click(function () {
             var formData=new FormData();
            formData.append("username",$(":text").val());
            formData.append("file",$("#upload")[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>
    复制代码

     view.py

    复制代码
    def ajaxupload(request):
        return render(request,"ajaxupload.html")
    
    def get_upload(request):
        if request.method == "POST":
            print("FIFLE", request.FILES)
            file_obj = request.FILES.get("file")
            print(file_obj.name, "-----")
            file_obj = request.FILES.get("file")
            with open(file_obj.name, "wb") as f:
                for i in file_obj:
                    f.write(i)
            return HttpResponse("上传成功")
    复制代码
  • 相关阅读:
    Altium Designer 快捷键与技巧
    常用贴片三极管型号与丝印的对应关系(SOT23)
    buck型DC-DC分析
    IAR升级之后,编译stm32官方工程报错的解决办法
    单片机中不带字库LCD液晶屏显示少量汉字
    结构体应用及其字节对齐问题
    退出循环break,continue,return,goto分析
    金莎伪粉丝的日常
    keil5 mdk使用ST-Link II下载出现cannot halt the core解决办法
    keil5 mdk调用外部编辑器notepad++、sublime3、VSCode总结
  • 原文地址:https://www.cnblogs.com/mqhpy/p/11280204.html
Copyright © 2020-2023  润新知