Django-Ajax进阶
一、Ajax上传文件
1、form表单上传文件
文件和其他的数据类型不一样，是一个二进制的形式
Form上传文件的时候切记要加上：enctype="multipart/form-data"
formupload.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>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<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>
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+
要是使用FormData一定要加上：
一定要加上：
contentType：false
processDate：false
#不做预处理
ajaxupload.html
<h3>Ajax上传文件</h3>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p> <button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#} <script>
$("#upload_button").click(function(){ var username=$("#username").val();
var upload_file=$("#upload_file_ajax")[0].files[0]; var formData=new FormData();
formData.append("username",username);
formData.append("upload_file_ajax",upload_file); $.ajax({
url:"/upload_file/",
type:"POST",
data:formData,
contentType:false,
processData:false, success:function(){
alert("上传成功!")
}
});
})
</script>
views.py
def index(request):
return render(request,"index.html") def upload_file(request):
print("FILES:",request.FILES)
print("POST:",request.POST)
return HttpResponse("上传成功!")
3、伪造Ajax上传文件
iframe标签
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
示例：
<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>
iframe+form
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<h3>伪造Ajax上传文件</h3> <form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
<p><iframe name="ifr" id="ifr"></iframe></p>
<p><input type="file" name="upload_file"></p>
<p><input type="text" name="user"></p>
<input type="button" value="提交" id="submitBtn">
</form> <script> $("#submitBtn").click(function(){ $("#ifr").load(iframeLoaded);
$("#form2").submit(); }); function iframeLoaded(){
alert(123)
} </script>
views
def index(request):
return render(request,"index.html")
def upload_file(request):
print("FILES:",request.FILES)
print("POST:",request.POST)
return HttpResponse("上传成功!")
二、jQuery.serialize()
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。
serialize()函数常用于将表单内容序列化，以便用于AJAX提交。
该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。
该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
与常规表单提交不一样的是：常规表单一般会提交带有name的按钮控件，而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。
语法：
jQuery 1.0 新增该函数
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()函数通常用于将表单内容序列化，以便通过AJAX方式提交。
$("#btn").click( function(){
// 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
$.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
alert( "AJAX提交成功!" );
} );
} );
示例：
<!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>
<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>
<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>
$("#btn").click(function () {
{# 方式一#}
//$.ajaxSetup({
// data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
//});
$.ajax({
url:"/serialize/",
type:"POST",
{# 方式三#}
headers:{"X-CSRFToken":$.cookie('csrftoken')},
//data:$("form").serialize(), //序列form表单所有的
data:$(":text,:password,:checkbox").serialize(), //序列自己选择的
success:function (data) {
var data=JSON.parse(data); //js中的反序列化
console.log(data);
console.log(typeof data);
$(".error").html(data);
}
})
})
</script>
</body>
</html>
serialize.html
def serialize(request):
# form = request.POST
# print(form)
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)
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)#获取单个
views.py
三、定时器：关于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>
ajax的参数补充
- type不写的话默认是GET
- dataType和ContentType：
dataType: 浏览器发给服务器希望返回的数据类型 。。如果我们明确地指定目标类型，就可以使用data Type。
ContentType:
请求头里有：浏览器告诉服务器内容的类型
响应头里也有：服务器响应浏览器的内容
JS和JQuery对象之间的转换
jQuery对象加[0]就转换成了dom对象
dom对象加$符就转换成了jquery对象
processDate
默认为True ，预处理；
如果改为False，不做预处理
Django-Ajax进阶的更多相关文章
- Python之路【第十七篇】：Django【进阶篇 】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- Python之路【第十七篇】：Django【进阶篇】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- Python开发【第二十二篇】：Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- Python之路,Day15 - Django适当进阶篇
Python之路,Day15 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣 ...
- jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- 关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- Django 2.0 学习(07)：Django 视图(进阶-续)
接Django 2.0 学习(06):Django 视图(进阶),我们将聚焦在使用简单的表单进行处理和精简代码. 编写简单表单 我们将用下面的代码,来替换之前的detail模板("polls ...
随机推荐
- 通过Java发射机制调用可变参数函数
1.获取可变参数的函数 获取可变参数的函数与获取参数类型为数组类型一样. clazz.getMethod("test", Object[].class); 其中O ...
- pip依赖安装与记录
pip freeze requirements.txt是一个常常被许多Flask应用用于列出它所依赖的包的文本文件.它是通过pip freeze > requirements.txt生成的. 使 ...
- OpenCV中Kinect的使用（1）
图像处理中一般为了更好的获取外部信息都会使用到Kinect,其优势在于除了传统的RGB摄像头之外,还拥有一个获取深度信息的3D深度感应器,因此可以获得外界物体的3维信息实现物体的跟踪.手势识别等各项功 ...
- [浪风JQuery开发]jquery最有意思的IFrame类似应用--值得深入研究
前几天一时兴起答应朋友的需求--做一个外国的企业网站: 本想做就做呗,可没想我辛辛苦苦用浪风认真php平台开发后,对方来一句我服务器不能安装其他程序,请给我用frame框架开发. 浪风那是一个苦字难言 ...
- [转]Java中怎样把数组转换为ArrayList
方法汇总: Element[] array = {new Element(1),new Element(2),new Element(3)}; ArrayList<Element> arr ...
- AsyncTask机制学习
其内容可以参考http://blog.csdn.net/webgeek/article/details/17298237 ,首先创建一个AsyncTask类 class GetFaceDetectTa ...
- [Unity基础]移动平台下的文件读写
From:http://blog.csdn.net/lyh916/article/details/52161633 参考链接: http://www.cnblogs.com/murongxiaopif ...
- [Unity热更新]tolua# & LuaFramework(一)：基础
一.tolua# c#调用lua:LuaState[变量名/函数名] 1.LuaState a.执行lua代码段 DoString(string) DoFile(.lua文件名) Require(.l ...
- Lucene索引文件组成
Lucene的索引里面存了些什么,如何存放的,也即Lucene的索引文件格式,是读懂Lucene源代码的一把钥匙. 当我们真正进入到Lucene源代码之中的时候,我们会发现: Lucene的索引过程, ...
- FileToolkit 文件工具箱
import org.apache.commons.io.FileUtils; import org.apache.commons.io.filefilter.*; import org.apache ...