AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Ajax作者：编程之家

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

一、熟悉知识点

@H_502_17@1、什么是json字符串？

　　轻量级的数据交换格式

@H_502_17@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>

复制代码

@H_502_17@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的错

解决办法有三种：

@H_502_17@方式一：

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

@H_502_17@方式二：自己组装一组键值对  （ 推荐）

复制代码

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

复制代码

@H_502_17@方式三：自己设置头信息

复制代码

 
<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()函数用于@H_502_17@序列化一组表单元素，将表单内容编码为用于提交的字符串。

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

该函数主要根据@H_502_17@用于提交的@H_502_17@有效表单控件的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,:checkBox").serialize(),//序列自己选择的

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

复制代码

四、上传文件

@H_502_17@1、Form表单上传文件

文件和其他的数据类型不一样，是一个二进制的形式
Form上传文件的时候切记要加上：@H_502_17@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")

复制代码

@H_502_17@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("上传成功")

复制代码

 

时间：2019-10-02 23:10:18 阅读（6）
最新文章 更多
3 android颜色 2019-10-08
6 @L_404_25@ 2019-10-08
8 类加载的过程 2019-10-08
9 Censoring 2019-10-08
最新资讯 更多

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native