Python开发【前端】:Ajax(二)
原生Ajax、JQuery、伪Ajax三种方式使用优先级
如果发送的是【普通数据】
- jQuery
- XMLHttpRequest
- iframe
如果发送的是【文件】
- iframe
- jQuery(FormData)
- XMLHttpRequest(FormData)
原生Ajax操作
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)
1、XmlHttpRequest对象介绍
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...
主要属性
2、用原生Ajax做个请求
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <script>
function Ajax1(){
var xhr = new XMLHttpRequest();
xhr.open('POST', '/ajax_json/',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 接收完毕
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
xhr.setRequestHeader('k1','v1');
// post请求必须加下面这句请求头 不然后台数据拿不到
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("name=root;pwd=123");
}
</script>
</body>
</html>
处理文件:
def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
print(request.POST)
ret = {'code':True,'data':None}
import json
return HttpResponse(json.dumps(ret))
3、跨浏览器支持
XmlHttpRequest
- IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
- IE6, IE5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
<input type="button" onclick="XmlPostRequest();" value="Post发送请求" /> <script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript"> function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; } function XhrPostRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据,执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('POST', "/test/", true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 发送请求
xhr.send('n1=1;n2=2;');
} function XhrGetRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据,执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('get', "/test/", true);
// 发送请求
xhr.send();
} </script> </body>
</html>
基于原生AJAX - Demo
“伪”AJAX
由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求,进行偷偷的发送请求
def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
print(request.POST)
ret = {'code':True,'data':None}
import json
return HttpResponse(json.dumps(ret))
处理文件
① Form表单提交到iframe中,页面不刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <form action="/ajax_json/" method="POST" target="ifm1"> <!-- target跟iframe进行关联 -->
<iframe id="ifm1" name="ifm1" ></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" value="Form提交"/>
</form>
</body>
</html>
② Ajax提交到iframe中,页面不刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <input type='text' id="url" />
<input type="button" value="发送Iframe请求" onclick="iframeRequest();" />
<iframe id="ifm" src="http://www.baidu.com"></iframe> <script src="/static/jquery-1.12.4.js"></script>
<script> function iframeRequest(){
var url = $('#url').val();
$('#ifm').attr('src',url);
}
</script>
</body>
</html>
③ Form表单提交到iframe中,并拿到iframe中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <form action="/ajax_json/" method="POST" target="ifm1">
<iframe id="ifm1" name="ifm1" ></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" onclick="sumitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function sumitForm(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
}
</script>
</body>
</html>
XmlHttpRequest、JQuery、Iframe进行文件上传
下面分别进行原生Ajax、Ajax、伪Ajax进行上传文件的请求
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get(('username'))
fafafa = request.FILES.get('fafafa') #获取文件 with open(fafafa.name,'wb') as f:
for item in fafafa.chunks():
f.write(item)
print(username,fafafa)
ret = {'code': True, 'data': request.POST.get('username')}
import json return HttpResponse(json.dumps(ret))
处理文件
① 原生Ajax(XmlHttpRequest)上传文件+定制好看的上传按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();" /> <script>
function xhrSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0]; //获取文件对象 var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr = new XMLHttpRequest();
xhr.open('POST', '/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>
② JQuery进行文件的上传:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
{# <input type="button" value="提交XHR" onclick="xhrSubmit();" />#}
<input type="button" value="提交jQuery" onclick="jqSubmit();" />
<div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0]; var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); $.ajax({
url: '/upload_file/',
type: 'POST',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
// Object {readyState: 4, responseText: "{"data": "root", "code": true}", status: 200, statusText: "OK"}
}
})
}
</script>
</body>
</html>
上面两种方式都用到FormData(),但是如果是IE浏览器的话是不支持FormData(),所以就得用到下面这种方式
③ Iframe进行文件的上传:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
}
</script>
</body>
</html>
上传文件时图片预览
① 点击上传文件提交
处理文件:
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get(('username'))
fafafa = request.FILES.get('fafafa') #获取文件
import os
img_path = os.path.join('static/imgs/',fafafa.name) #static下创建imgs目录
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
print(username,fafafa)
ret = {'code': True, 'data': img_path}
import json return HttpResponse(json.dumps(ret))
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj) $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
})
}
</script>
</body>
</html>
② 选择文件后,直接上传
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" /> //onchange 选中文件时触发
{# <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function changeUpalod(){
$('#ifm1').load(function(){ //load 绑定load事件,有数据时执行
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
});
$('#form1').submit();
}
</script>
</body>
</html>
更多-》跳转
Python开发【前端】:Ajax(二)的更多相关文章
- Python开发【十二章】:ORM sqlalchemy
一.对象映射关系(ORM) orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却 ...
- PYTHON开发--面向对象基础二
一.成员修饰符 共有成员 私有成员, __字段名 - 无法直接访问,只能间接访问 1. 私有成员 1.1 普通方法种的私有成员 class Foo: def __init__(self, n ...
- python开发初期及二次开发C api
1,python2 or python 区别, https://wiki.python.org/moin/Python2orPython3 python software foundation 2,p ...
- Python开发【前端】:Ajax
Ajax Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = ...
- Python开发【前端】:Ajax(一)
Ajax Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScr ...
- Python开发【前端】:jQuery
jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...
- Python开发【前端】:DOM
DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...
- Python开发【前端】:JavaScript
JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Python开发【第二十二篇】:Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- Python web前端 11 form 和 ajax
Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...
随机推荐
- input文本框与图片的对齐
<input name="demo" style="width:100px;vertical-align:top" /> <img src=& ...
- 接口日志记录AOP实现-LogAspect
使用spring aop日志记录 所需jar包 pom.xml <!-- logger begin --> <dependency> <groupId>org.sl ...
- Sprite与屏幕之间的关系
锚点这东西挺怀念的,N年前我在做J2ME手游的时候.屏幕整体的坐标是左上角是00点.X轴向右递增,Y轴向下递增.所有的image也是这个原理.只是unity的触摸屏坐标不是左上角,而是左下角. 所以这 ...
- ubuntu13.10更换源
Ubuntu13.10更新源 不同的网络状况连接以下源的速度不同, 建议在添加前手动验证以下源的连接速度(ping下就行),选择最快的源可以节省大批下载时间. 首先备份源列表: sudo cp /et ...
- vs2013\2015-UML
1.UML简介Unified Modeling Language (UML)又称统一建模语言或标准建模语言. 简单说就是以图形方式表现模型,根据不同模型进行分类,在UML 2.0中有13种图,以下是他 ...
- swift - UITextView的用法
1,多行文本控件的创建 textView.frame = CGRect(x:50,y:180,width:self.view.bounds.size.width - 100,height:50) te ...
- PyQt4布局管理——绝对定位方式
PyQt4中的布局管理器 布局管理器是编程中重要的一部分.所谓布局管理器是指我们在窗口中安排部件位置的方法.布局管理器有两种工作方式:绝对定位方式(absolute positioning)和布局类别 ...
- Spring事务核心接口
- Oracle 11G Client 客户端安装步骤(图文详解)
http://www.cnblogs.com/jiguixin/archive/2011/09/09/2172672.html 下载地址: http://download.oracle.com/otn ...
- 《转》python学习(3)
转自http://www.cnblogs.com/BeginMan/archive/2013/06/03/3114974.html 1.print语句调用str()函数显示,交互式解释器调用repr( ...