- 浏览: 83732 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
songfantasy:
不错,学习了
java与c/c++之间的数据交互-----jni点滴 -
wen0301:
有时间,读读看,并且看看花多长时间。
为了练好口语,你敢不敢每天读一遍,坚持一个月? -
wen0301:
加一些 代码,效果会更好。。。
设计模式:简单工厂、工厂方法、抽象工厂之小结与区别 -
wen0301:
能加一些实际代码 效果会更好吧~~
设计模式:简单工厂、工厂方法、抽象工厂之小结与区别 -
lijiancool:
每天一遍,都不要做其他事情了,哦滴神呀。。。。
为了练好口语,你敢不敢每天读一遍,坚持一个月?
接上篇随笔。继续介绍ajax的使用。
上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html
本篇导航:
Ajax响应参数
csrf 跨站请求伪造
jQuery.serialize()
上传文件
一、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>
View Code
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=="123":
response["flag"]=True
import json
return HttpResponse(json.dumps(response))
发表评论
-
Oracle的where条件in/not in中包含NULL时的处理
2018-01-15 13:15 1532创建一个测试表t_inlinuxidc@TEST> ... -
在sae中设置django,让sae的工作环境跟本地python环境一致
2018-01-15 13:15 393sae中安装有python环境,想让sae导入自己下载的d ... -
win10下Django工程的创建
2018-01-11 13:39 327一、配置环境 win ... -
MySQL 5.7.18 zip文件安装教程
2018-01-11 13:47 476MySQL 5.7.18 zip 文件安装教程 安装 ... -
win10下Django工程的创建
2018-01-11 13:34 555一、配置环境 win10、python3.6、p ... -
MySql数据库逻辑架构讲解
2018-01-11 13:44 602与其他数据库相比,My ... -
Python使用虚拟环境
2018-01-11 13:44 411这里想象一下需 ... -
Kivy 中文教程 实例入门 简易画板 (Simple Paint App):1. 自定义窗口部件 (widget)
2018-01-05 10:01 8551. 框架代码 用 PyCharm 新建一个名为 S ... -
Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量
2018-01-05 10:01 1106大家在中学就已经学过变量的概念了。例如:我们令 x = 1 ... -
面向对象1
2018-01-05 09:49 422面向对象概念 面向对象是利用类和对象来创建各种模型对 ... -
Python列表及元组操作
2018-01-05 09:49 530#列表(一组有序 ... -
Python的hasattr() getattr() setattr() 函数使用方法详解
2018-01-05 09:57 684hasattr(object, name)判断一个对象里面 ... -
利用DBUTILS获得刚插入自增id记录的id信息的方法及代码
2018-01-02 12:36 2008我在做两个需要关联的表的时候,第二张表需要知道第一张表的i ... -
win10如何打开sqlserver配置管理器
2018-01-02 12:24 1018win10如何打开sqlserver配置管理器,windo ... -
数据库查询语言DQL使用介绍
2018-01-02 12:24 476(1)C++ppentry.C++om/list.php? ... -
Redis Basic在CentOS下安装指令
2018-01-02 12:23 466安装 C++entOS下安装指令: wge ... -
SpringBoot整合PageHelper实现数据库分页的代码教程
2018-01-02 12:23 716最近学习了SpringBoot 由于需要数据库分页功能 再 ... -
Day01_计算机硬件及启动流程
2017-12-26 17:23 521一.计算机硬件介绍 概念:由一条总线把CPU、内存和 ... -
python+Eclipse+pydev环境搭建
2017-12-26 17:12 370本文重点介绍使用Eclipse+pydev插件来写Pyth ... -
Python学习一:序列基础详解
2017-12-26 17:20 407作者:NiceCui 本文谢绝转载,如需转载需征得作 ...
相关推荐
django ajax异步请求Django的Ajax库3813428.zip
实现了python 浏览器开发的前后端开发的入门demo,使用了pyecharts+Django+Ajax技术展示和传输数据。
今天小编就为大家分享一篇Django结合ajax进行页面实时更新的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Ajax-django-ajax.zip,django应用程序的快速而简单的ajax库。包含ajax decorator、ajax中间件、快捷方式等。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于...
资源分类:Python库 所属语言:Python 使用前提:需要解压 资源全名:django_ajax_datatable-4.0.2-py2.py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
Django中使用ajax post向后台传送数据时403 Forbidden (CSRF token missing or incorrect.):的解决办法
django通过ajax实现的在线计算器程序(界面精美)。采用bootstrap为前端框架。python版本:3.6.1 django=1.11.17 在windows7下也可用
大作业基于Django和Ajax实现的分布式计算应用源码。一个基于Django和Ajax实现的分布式计算应用,包含管理后台和处理情况显示大屏。 这个后台工作逻辑大概如下: 所有的局域网中的用户都可以访问作为服务端的机器来...
通过Django的Form方式上传文件,简单,但无法局部刷新实现ajax效果; 通过js或jQuery方式,需要使用FormData对象,仍有些浏览器不兼容; 通过Form+iframe方式上传文件,兼容性最好。 里面含有全部源代码。
Ajax-Django-Ajax-Example.zip,django ajax示例,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改...
源码包括: 1、django的原生Form表单数据验证。 2、Ajax方式的Form表单数据验证
Ajax-django_tweetme.zip,用django、ajax、bootstrap等语言设计twitter基本版本克隆,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的...
django-ajax, 在 Django 中,创建AJAX端点的简单框架 概述这个软件包创建了一个在 Django 中创建AJAX终结点的最小框架,不必创建所有映射。处理错误。另外,这个包允许你创建AJAX端点,以便直接从JavaScript操作 ...
Django JavaScript Integration AJAX and jQuery 英文原版
Django 的 Ajax 重定向中间件 这是什么? 这是一个用于 Django 和 Ajax 的有用中间件的集合。 例如, 有 URL 路由子系统,它使用 AJAX。 此外,它还支持历史推送状态。 这意味着,当您使用...
Ajax-django-ajax-login.zip,使用ajax启用登录和注册,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下...