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,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...
随机推荐
- java 之 插入排序
思想:将一个数组分成两组,左边那组始终有序,每次取右边那组插入到左边适当的位置,保证左边有序,当右边没有需要插入的数据的时候,整个数组是有序的.插入排序是稳定排序. 注:此图引用自https://ww ...
- js数组遍历的常用的几种方法以及差异和性能优化
<script type="text/javascript"> /*对比: 1.map速度比foreach快 2.map会返回一个新数组,不对原数组产生影响,forea ...
- js图片轮播效果常见的产品无缝轮播
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 简单修改BOOK主题样式
body{ font-size: 13px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0px; word ...
- Hyperledger(超级账本)的worldstate和SAP CRM的CRMD_CUMULAT_H
Hyperledger fabric是基于区块链技术的一个开源项目,由Linux基金会于2015年发起,目的是推进区块链数字技术和交易验证的发展和落地. Hyperledger由多个区块构成了一个有序 ...
- sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')
上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock') <!-- * ...
- python基础一 day5 知识点
Unicode转化为gbk和utf-8 表现形式:str转化为bytes
- 微信小程序---目录结构
(1)目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: (2)允许上传的文件 .
- luogu P2865 路障
https://www.luogu.org/problemnew/show/P2865 看到题解好多dijkstra,作为一名钟爱于spfa的蒟蒻看不下去了. 有些spfa要跑两边,代码量要曾长好多( ...
- python计算圆面积
#coding=gbk #coding=utf-8 #-*- coding: UTF-8 -*- #调用math包处理相关的运算 import math #圆半径 r = 2 #计算圆面积π*r*r与 ...