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))

views.py

当有好多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("上传成功")

ajax补充FormData的更多相关文章

ajax补充--------FormData等...
一.回顾上节知识点 1.什么是json字符串? 轻量级的数据交换格式 2.定时器:关于setTimeout setTimeout(foo,3000) # 3000表示3秒,foo表示一个函数,3秒后 ...
Django【第21篇】：Ajax之FormData
ajax补充--------FormData等... 一.回顾上节知识点 1.什么是json字符串? 轻量级的数据交换格式 2.定时器:关于setTimeout setTimeout(foo,3000 ...
jQuery Ajax使用FormData上传文件和其他数据，后端web.py获取
参考博文: 通过jQuery Ajax使用FormData对象上传文件方法一:使用<form>表单初始化FormData对象方式上传文件前端(JQuery): <form enc ...
.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站使用For ...
jquery ajax 提交 FormData
$('form').submit(function(){ var formdata=new FormData(this); $.ajax({ type:'POST', url:'/url/path', ...
Ajax通过FormData上传文件
1.使用<form>表单初始化FormData对象方式上传文件 HTML代码 <form id="uploadForm" enctype="multip ...
ajax利用FormData异步文件提交
通常情况下,我们上传文件都会使用form表单来提交文件.但有时候,我们会有异步提交文件的需求,在这种情况下,我们就需要新建一个Formdata来提交文件,后台如果使用的是PHP的话可以使用$_FILE ...

随机推荐

vue-cli入门之项目结构分析
一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build——[webpack配置] build文件主 ...
android、ipone在文本框中输入文字的不同
1.android机会输入时会在键盘上先显示,你确定后再填充如文本框 2.ipone机是你输入时就直接填充到文本框,当你选择输入信息时,就会先把文本框的内容清空,在填充选择的文字,这时就会有个问题,如 ...
pandas通过字典生成dataframe
1.将一个字典输入: 该字典必须满足:value是一个list类型的元素,且每一个key对应的value长度都相同: (以该字典的key为columns) >>> import pa ...
IE 内使用ActiveX，写注册表被重定向到如下注册表
IE 内使用ActiveX,写注册表被重定向到如下注册表,所以使用注册表做标记要注意下,目前还没找为什么会这样 HKEY_CURRENT_USER\Software\Microsoft\Interne ...
使用struts2的iterator标签出现的错误
错误如下所示: 代码如下所示: <body> <s:debug></s:debug> 获取list的值第一种方式 <!-- 3 获取值栈list集合数据 -- ...
MDX中Filter 与Exist的区别
获得一个集合,这个一般用来筛选出一个自定义的set,比如在中国的餐厅该set返回所有MSDNteam下并且在Fact Thread度量上有记录的products 用Exists实现 sele ...
编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...
条款42：了解typename的双重含义
typename在很多种情况下与class是完全相同的,例如下面的使用: templame<typename T> ...... template<class T> ..... ...
php操作EXCLE（通过phpExcle实现读excel数据）
<?phprequire_once('/PHPExcel/Reader/Excel2007.php');$objReader = new PHPExcel_Reader_Excel2007;$P ...
loj #6216. 雪花挂饰
(今天碰到的题怎么这么小清新 $n$ 个不相同的点,$q$ 组询问,每次给定 $l,r$,问在 $n$ 个点中,选出 $x$ 个点 $(x \in [l,r])$,用边连起来,能构成多少种不同的树 $ ...

ajax补充FormData

ajax补充FormData的更多相关文章

随机推荐

热门专题