71、django之Ajax续
接上篇随笔。继续介绍ajax的使用。
上篇友情连接：http://www.cnblogs.com/liluning/p/7831169.html
本篇导航：
一、Ajax响应参数
上篇最后介绍了ajax的请求参数现在补充一个响应参数
dataType：
预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不需要显性指定这个属性，
ajax会根据服务器返回的content Type来进行转换； 比如我们的服务器响应的content Type为json格式，这时ajax
方法就会对响应的内容进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式的对
象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用 data Type。dataType的可用
值：html｜xml｜json｜text｜script
简单说就是告诉服务器需要返回什么数据类型
二、csrf 跨站请求伪造
我们之前用form表单POST提交时如果没有｛% csrf_token %｝客户端收不到数据会报错同样用ajax POST提交数据也有同样的错误那么准么解决呢？
1、方法一
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
$.ajax({
...
})
缺点：当js与html文件分离时，{{ csrf_token }} 无法被渲染失去作用，用方法一必须将js和html写在一起
2、方法二
{% csrf_token %}
$.ajax({
url:"",
type:"POST",
data:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
}
})
缺点：html body标签中必须存在{% csrf_token %}
3、方法三
//<script src="{% static 'js/jquery.cookie.js' %}"></script> 需要下载对应文件
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})
缺点：基本通用哈哈哈
三、jQuery.serialize()
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。serialize()函数常用于将表单内容序列化，以便用于AJAX提交。该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
简单总结：就是说我们如果有很多input标签内容需要提交总不会全部写在data中罗列出来吧，这就用到serialize()函数了可以帮我们一次性提交数据到客户端。
例如：
<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").serialize()
uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
部分序列化：$(":text, select, :checkbox").serialize()
username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
view视图函数如何取值呢？和以前的POST请求相同
request.POST.get("name") //input中的name属性
四、上传文件
1、普通上传文件
1）template
<form action="/upload/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>用户名<input type="text" name="user"></p>
<p>头像<input type="file" name="avatar"></p>
<input type="submit">
</form>
enctype属性不可缺少
2）view
def upload(request):
if request.method=="POST":
print("POST", request.POST)
print("FILES",request.FILES) # FILES <MultiValueDict: {}> file_obj=request.FILES.get("avatar")
print(file_obj.name,"-----")
with open(file_obj.name,"wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("成功")
return render(request,"upload.html")
这是将上传的文件写入到本地file_obj的name方法可以取到文件名称
3、Ajax(FormData)
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
1）template
<body>
<form action="" id="s1">
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p>头像<input type="file" id="upload_avatar"></p>
</form>
<p><button class="Ajax_send">提交</button><span class="login_error"></span></p> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script>
function foo() {
$(".login_error").html("")
}
$(".Ajax_send").click(function () {
var formData=new FormData();
formData.append("username",$(":text").val());
formData.append("password",$(":password").val());
formData.append("avatar",$("#upload_avatar")[0].files[0]);
$.ajax({
url:"/get_ajax/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:formData,
contentType:false,
processData:false,
success:function (data) {
var data=JSON.parse(data);
if(!data["flag"]){
$(".login_error").html("用户名或者密码错误")
setTimeout(foo,3000)
}
}
})
})
</script>
</body>
2）view
def get_ajax(request):
username=request.POST.get("username")
password=request.POST.get("password")
print("FIFLE",request.FILES)
print("POST",request.POST)
response={"flag":False}
if username=="bjd" and password=="":
response["flag"]=True
import json
return HttpResponse(json.dumps(response))
71、django之Ajax续的更多相关文章
- django之Ajax续
接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...
- python Django之Ajax
python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...
- django 接受 ajax 传来的数组对象
django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django使用AJAX调用自己写的API接口
Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django之Ajax提交
Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...
- Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数
Django和Ajax 一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语 ...
- Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
随机推荐
- java 学习笔记——类之间的关系之封装、继承与多态的详解
封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...
- Spring Boot Starter 介绍
http://www.baeldung.com/spring-boot-starters 作者:baeldung 译者:http://oopsguy.com 1.概述 依赖管理是任何复杂项目的关键部分 ...
- hiveQL求差集
hive sql求差集的方法 1.什么是差集 set1 - set2,即去掉set1中存在于set2中的数据. 2.hive中计算差集的方法,基本是使用左外链接. 直接上代码 select * fro ...
- 比较两个文件不同以及生成SQL插入语句
Tips 做一个终身学习的人! 日拱一卒,功不唐捐. 今天有个小小的需求,具体需求是这样的: 有两个文本文件,每个文件都有一些字符串文本: 比较第一个文件中,在第二个文件中,不存在的字符串文本: 把这 ...
- Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- iOS将自己的框架更新到cocopods上
第一步 把自己的框架更新到github 上,为了提交地址给他人下载.这里就不详细介绍如何把项目更新到github上了 第二步 这个时候我们的项目已经挂在github上了我们需要给本地的项目新建一个Po ...
- Java加密与解密笔记(一) Base64和数据摘要算法
对加密解密下面的内容一定要先理解: 甲乙双方要通信,中间的连接可能被人窃听甚至篡改.解决办法就是把传输的内容进行加密,用密文去传输,这样即使被监听也没办法知道信息的具体内容. 加密时,甲乙双方可以约定 ...
- C# 7.0 特性
在昨天WR发布了vs17,vs17可以使用C#7.0,在之前,我写有一篇博客,关于C#7.0,参见:http://lindexi.oschina.io/lindexi/post/C-7.0/ 但是WR ...
- UVa10791 - Minimum Sum LCM
分析即为紫薯上的分析. 难点是发现当每个aipi作为一个单独的整数时才最优.. 答案就是将所有不同的 相同因子的积 相加即可 代码: #include<cstdio> #include&l ...
- asp.net core2.0网站的环境搭建和网站部署
使用到的软件和硬件 1. centos7.3服务器一台 2. xshell.xftp 3. vs2017 4. .NET Core 1. 安装 li ...