django学习之- Ajax
提示：jquery要使用1版本，因为高版本已不兼容低版本的游览器。
参考url：http://www.cnblogs.com/wupeiqi/articles/5703697.html
原生ajax:Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
XmlHttpRequest对象的主要方法：
a. void open(String method,String url,Boolen async)
用于创建请求 参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型） b. void send(String body)
用于发送请求 参数：
body： 要发送的数据（字符串类型） c. void setRequestHeader(String header,String value)
用于设置请求头 参数：
header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型） d. String getAllResponseHeaders()
获取所有响应头 返回值：
响应头数据（字符串类型） e. String getResponseHeader(String header)
获取响应头中指定header的值 参数：
header： 响应头的key（字符串类型） 返回值：
响应头中指定的header对应的值 f. void abort() 终止请求
XmlHttpRequest对象的主要属性：
a. Number readyState
状态值（整数） 详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据； b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数） c. String responseText
服务器返回的数据（字符串类型） d. XmlDocument responseXML
服务器返回的数据（Xml对象） e. Number states
状态码（整数），如：200、404... f. String statesText
状态文本（字符串），如：OK、NotFound...
实例：
前台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<p>
<input name="test" />
<input type="button" value="Ajax1" onclick="Ajax1()" />
</p>
<script>
function getXHR() {
{# 游览器兼容#}
var xhr = null;
if(XMLHttpRequest){
{# 新建#}
var xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function Ajax1() {
{# 打开#}
xhr.open('POST','/app04/ajax_json',true);
xhr.onreadystatechange =function () {
{# onreadystatechange是readyState的回调函数，判断值为多少的时候执行什么动作#}
if(xhr.readyState == 4){
//表示接收完毕,以下打印返回值
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
{# 发请求时候额外带个头写法，CSRF可使用#}
xhr.setRequestHeader('k1','v1');
//django的post源码里已指定固定格式，否则后端无法收到数据
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8');
{# 发送,send发送格式固定#}
xhr.send('name=root;pwd=123');
}
</script>
</body>
</html>
后台代码
def ajax(request):
return render(request,'app04/ajax.html') def ajax_json(request):
print(request.POST)
ret = {'code':True,'data':None}
import json
return HttpResponse(json.dumps(ret))
路由代码
url(r'^ajax$',views.ajax),
url(r'^ajax_json',views.ajax_json),
Ajax写法格式解释
$.Ajax({ # 提交到后台
url:'/host', # 提交到哪里
type:'POST' # 提交方式
# 第一种写法
data:{'k1':123,'k2':'root'} # 提交数据
# 第二种写法
data:$('#add_form').serialize(), #代替上一句，将form表单里所有数据统一打包发到后台
# 注意如果data字典中还包含1个字典，这个包含的字典需要转为字符串才可以发送：JSON.stringfy({'k1','v1'})
dataType:'JSON', # 这里是jquery功能，将传回来的数据进行json解析，就不需要下面的函数再次进行解析了，下面函数中的参数就为obj对象
traditional:true, # 可以将data中的列表数据传到后台，python使用get_list来接收列表数据。
success: function(data){ # 回调函数，等待接收上面提交后的返回数据
// data是服务器端返回的字符串
var obj = JSON.parse(data);
}
error:function(){ #当前台发送了一个请求到后台，后台未捕捉到发了个未知的错误，才触发这里执行
}
})
建议：永远让服务端返回一个字典，返回方式：return HttpResponse(json.dumps(字典))
不要使用render，因为返回的模板文件只做渲染，无法json转换，不支持redirect方法。
以下这些方法全部是调用上面的Ajax方法，不同的是只修改对应的type方法,所以说只用Ajax方法即可。
$.get(url='XX',data:{},success)
$.post
- 跨域请求（jsonp,CORS）
- ajax上传文件（2种方式）
伪造ajax请求代码
<form action="/app02/ajax_json" method="post" target="ifm"> # target=ifm使form和iframe建立管理
<iframe name="ifm"></iframe> #通过iframe绑定form后进行在页面不刷新的情况下提交
<input type="text" name="uname" />
<input type="text" name="email" />
<input type="submit" value="form提交" />
</form>
时机：
如果发送的是普通数据，使用顺序优先级：jquery,XMLHttpRequest,iframe 获取iframe标签的内容
function submitForm() {
$('#ifm').load(function () {
var ifmcontent = $('#ifm').contents().find('body').text()
console.log(JSON.parse(ifmcontent))
})
}
实例：上传文件
前端的3种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="fafafa" name="fafafa"/>
<a>上传</a>
<input type="button" value="提交XHR" onclick="xhrSubmit()">
<input type="button" value="提交XHR" onclick="ajaxSubmit()"> <form id='fm1' enctype="multipart/form-data" action="/app02/upload_file/" method="post" target="ifm">
<iframe id='ifm' name="ifm"></iframe>
<input type="file" name="fafafa" onchange="changeUpload();"/>
<input type="submit" onclick="iframeSubmit();" value="form提交"/>
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.min.js"></script>
<script>
function changeUpload() {
{# 输入框改变自动执行，提交操作#}
$('#fm1').submit()
iframeSubmit()
}
function iframeSubmit() {
$('#ifm').load(function () {
var ifmcontent = $('#ifm').contents().find('body').text();
var obj = JSON.parse(ifmcontent);
$('#preview').empty();
var tagimg = document.createElement('img');
tagimg.src = '/' + obj.data;
$('#preview').append(tagimg)
})
}
function ajaxSubmit() {
var file_obj = document.getElementById('fafafa').files[0];
var fd = new FormData();
fd.append('uname','afafaf');
fd.append('fafafa',file_obj);
$.ajax({
url:'/app02/upload_file/',
type:'POST',
data:fd,
processData:false,
contentType:false,
success:function (arg,a1,a2) {
console.log(arg)
console.log(a1)
console.log(a2)
}
})
}
function xhrSubmit() {
var file_obj = document.getElementById('fafafa').files[0];
console.log(file_obj);
var fd = new FormData();
fd.append('uname','afafaf');
fd.append('fafafa',file_obj);
var xhr = new XMLHttpRequest();
xhr.open('POST','/app02/upload_file/',true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
var obj = JSON.parse(xhr.responseText);
console.log(obj)
}
};
xhr.send(fd)
}
</script>
</body>
</html>
views的写法
def upload(request):
if request.method == 'GET':
return render(request,'app02/upload.html')
def upload_file(request): # 上传文件
uname = request.POST.get('uname')
fff = request.FILES.get('fafafa')
import os
upfile = os.path.join('static/img',fff.name)
f = open(upfile,'wb')
for d in fff.chunks():
f.write(d)
f.close()
ret = {'code': True, 'data': upfile}
import json
return HttpResponse(json.dumps(ret)) def upload_img(request): # 上传图片
request.GET.get('dir') # 这个方法可获取显示上传文件的类型
obj = request.FILES.get('imgFile')
import os
upfile = os.path.join('static/img',obj.name)
f = open(upfile,'wb')
for d in obj.chunks():
f.write(d)
f.close()
import json
dic = {
'error':0,
'url':'/'+upfile,
'message':'error'
}
return HttpResponse(json.dumps(dic))
django学习之- Ajax的更多相关文章
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- Django学习笔记（13）——Django的用户认证（Auth）组件，视图层和QuerySet API
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
- Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap
本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...
- Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程
这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...
- Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录
一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...
- Django学习笔记（11）——开发图书管理页面
一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...
- 今天主要推荐一下django学习的网址!
前言:每个月忙碌的头20天后,在上班时间投入到django理论学习的过程中,花了差不多3天时间简单的研究了一下django,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...
随机推荐
- Js学习文件上传
// 文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pen ...
- win10忘记wifi记录
1.点击桌面右下角无线图标 2.点击网络设置 3.点击管理WIFI设置 4.点击要管理的账户,忘记或者共享该wifi.
- EXCEL Skills Commonly Used
1. 判断某一列中的数据是否在另一列中 http://jingyan.baidu.com/article/358570f67fd4b0ce4724fc29.html 2. 快速删除excel中的空格( ...
- Mybatis-Generator逆向生成Po，Mapper，XMLMAPPER（一）
这个地方的生成需要用到三个文件,generatorConfig.xml.mybatis-generator-core-1.3.1.jar和mysql-connector-java-5.1.29.jar ...
- [Redis] 基于redis的分布式锁
前言分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁. 可靠性首先,为了确保 ...
- Logisim的使用
准备 通过Logisim的官网下载适合你机器的Logisim的软件,启动Logisim应用程序(Logisim可能有点bug,如果程序运行诡异,可能内部已经奔溃,最好的解决方法是重新启动它). Log ...
- FormItem label 属性 可以改成 slot模式 就能加入br回车了 iview
FormItem label 属性 可以改成 slot模式 就能加入br回车了 iview <FormItem> <div slot='label'>测试文字<br> ...
- 【软件构造】第三章第三节 抽象数据型(ADT)
第三章第三节 抽象数据型(ADT) 3-1节研究了“数据类型”及其特性 ; 3-2节研究了方法和操作的“规约”及其特性:在本节中,我们将数据和操作复合起来,构成ADT,学习ADT的核心特征,以及如何设 ...
- [BZOJ2120]:数颜色（分块？）
题目传送门 我感觉这种题没必要扯淡题目大意了,没啥用. 暴力过掉,擦了个边. 主要是讲一下这道题我用到的卡常. 首先,0,1标记我用的位运算,位运算符跑的要比正常的+,-,×,÷,true,false ...
- [题解] cogs 1669 神秘的咒语
http://cogs.pro:8080/cogs/problem/problem.php?pid=1669 "The Real Incantation is Their Common In ...