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="" />
12 <input name="username" type="text" value="张三" />
13 <input name="password" type="text" value="" />
14 <select name="grade" id="grade">
15 <option value="">一年级</option>
16 <option value="">二年级</option>
17 <option value="" selected="selected">三年级</option>
18 <option value="">四年级</option>
19 <option value="">五年级</option>
20 <option value="">六年级</option>
21 </select>
22 <input name="sex" type="radio" checked="checked" value="" />男
23 <input name="sex" type="radio" value="" />女
24 <input name="hobby" type="checkbox" checked="checked" value="" />游泳
25 <input name="hobby" type="checkbox" checked="checked" value="" />跑步
26 <input name="hobby" type="checkbox" value="" />羽毛球
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))
f
当有好多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是什么呢？
FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.$("#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("上传成功")
Django【第21篇】：Ajax之FormData的更多相关文章
- Python之路【第十七篇】：Django【进阶篇 】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- Python之路【第十七篇】：Django【进阶篇】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- ajax补充FormData
一.回顾上节知识点 1.什么是json字符串? 轻量级的数据交换格式 2.定时器:关于setTimeout setTimeout(foo,3000) # 3000表示3秒,foo表示一个函数,3秒后 ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- Python之路【第十六篇】：Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
- Python之路,Day15 - Django适当进阶篇
Python之路,Day15 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣 ...
- ajax补充--------FormData等...
一.回顾上节知识点 1.什么是json字符串? 轻量级的数据交换格式 2.定时器:关于setTimeout setTimeout(foo,3000) # 3000表示3秒,foo表示一个函数,3秒后 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
随机推荐
- 系统编码 python编码
编码一直都是一个很让人头疼的问题,尤其是在python里面.花了几天时间,终于把这个问题给弄明白了. 一,什么是编码,编码过程是怎样的?常见的编码方式有哪些? 编码是从一个字符,比如'哈',到一段二进 ...
- 设计模式(2): 响应store中数据的变化
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. store里面响应数据变化 通常情况下,我们会把数据存在store里面 ...
- RocketMQ 主从同步
RocketMQ 的主和从一直在使用 nio 进行数据同步: master master 监听端口 org.apache.rocketmq.store.ha.HAService.AcceptSocke ...
- 测开之路一百五十一：ajax的作用和基本实现原理
有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...
- 网易云课堂_C++程序设计入门(下)_第7单元：出入虽同趣，所向各有宜 – 文件输入和输出_第7单元 - 作业2：编程互评
第7单元 - 作业2:编程互评 查看帮助 返回 提交作业(剩余10天) 完成并提交作业 作业批改 互评训练 互评作业 自评作业 成绩公布 查看成绩 由于在线编程不支持 ...
- C 语言的函数 - 内存分析
函数基本概念 Linux 中,函数在内存的代码段(code 区),地址比较靠前. 函数定义 C 语言中,函数有三个要素:入参.返回值.函数名,缺一不可.函数使用前必须先声明,或者在使用之前定义. 函数 ...
- malloc和cmalloc
void *malloc(size_t size); 分配内存,但不会初始化,未使用内存不一定是0: void *calloc(size_t numElements,size_t sizeOfElem ...
- es为什么要取消type? 或者为什么一个index下多个type会有问题
同一个index下的不同的type下的相同的filed,在同一个index下其实会被认为是同一个filed. 否则,不同type中的相同字段名称就会在处理中出现冲突的情况,导致Lucene处理效率下降
- LeetCode算法题-Maximize Distance to Closest Person（Java实现）
这是悦乐书的第328次更新,第351篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第198题(顺位题号是849).在一排座位中,1表示一个人坐在该座位上,0表示座位是空的 ...
- Java多线程学习——synchronized锁机制
Java在多线程中使用同步锁机制时,一定要注意锁对对象,下面的例子就是没锁对对象(每个线程使用一个被锁住的对象时,得先看该对象的被锁住部分是否有人在使用) 例子:两个人操作同一个银行账户,丈夫在ATM ...