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,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...
随机推荐
- (转)IC设计完整流程及工具
IC的设计过程可分为两个部分,分别为:前端设计(也称逻辑设计)和后端设计(也称物理设计),这两个部分并没有统一严格的界限,凡涉及到与工艺有关的设计可称为后端设计. 前端设计的主要流程: 1.规格制定 ...
- XCode调试器LLDB
与调试器共舞 - LLDB 的华尔兹 你是否曾经苦恼于理解你的代码,而去尝试打印一个变量的值? NSLog(@"%@", whatIsInsideThisThing); 或者跳过一 ...
- vba，自定义公式，农历互转公历，excel ，wps
'vba 模块内容如下 自定义公式 '公历转农历模块 '原创:互联网 '修正: '// 农历数据定义 // '先以 H2B 函数还原成长度为 18 的字符串,其定义如下: '前12个字节代表1-12月 ...
- 云态(YunCloud)的Centos服务器修改dns教程
DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终 ...
- SQLite概述
SQLite概述 这个教程帮助您理解SQLite是什么,它如何不同于SQL,为什么它是必要的和它的方式处理应用程序数据库. SQLite是一个库,实现了一个独立的软件,serverless zer ...
- 关于JDBC访问存储过程的问题
最近开发一个应用,需要调用一个入参为List的存储过程. 存储过程为: proc_test(p1 OUT Number, p2 IN Number, p3 IN TAB_CUSTOMER); 这个Li ...
- idea创建和部署tomcat项目
小编今天花费了一上午,参悟出了如何快速的在idea上面创建并部署一个属于自己的maven项目,很荣幸能将自己的开发经验推而广之,希望能够帮助到大家! 前言 小编参考博文: Intellij Idea ...
- docker 深入理解之namespace
namespace 名称空间 docker容器主要通过资源隔离来实现的,应该具有的6种资源隔 namespace 的六项隔离 namespace 系统调用参数 隔离的内容 UTS CLONE_NEWU ...
- js模块化入门与commonjs解析与应用
JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一.JS模块化基本原理 在JS没有提出来模块化的时候,开发JS项目比较简单,同时也 ...
- process data
# version 1.0def connect_mysql(sql, oper_type="select", data_l=None): conn = pymysql.conne ...