参考源：http://blog.csdn.net/fgf00/article/details/54917439
三、Ajax操作
ajax操作基于浏览器的xmlHttpRequest对象，IE低版本是另外一个对象，jQuery 1 版本对那两个对象做了封装，兼容性最好，2 、3版本不再支持IE低版本了。
Ajax操作，用来偷偷发请求。
参考博客：
http://www.cnblogs.com/wupeiqi/articles/5703697.html
1、原生Ajax操作
XmlHttpRequest对象介绍
- XmlHttpRequest对象的主要方法：
1 void open(String method,String url,Boolen async) 2 用于创建请求 3 4 参数： 5 method： 请求方式（字符串类型），如：POST、GET、DELETE... 6 url： 要请求的地址（字符串类型） 7 async： 是否异步（布尔类型） 8 9 void send(String body) 10 用于发送请求 11 12 参数： 13 body： 要发送的数据（字符串类型） 14 15 void setRequestHeader(String header,String value) 16 用于设置请求头 17 18 参数： 19 header： 请求头的key（字符串类型） 20 vlaue： 请求头的value（字符串类型） 21 22 String getAllResponseHeaders() 23 获取所有响应头 24 25 返回值： 26 响应头数据（字符串类型） 27 28 String getResponseHeader(String header) 29 获取响应头中指定header的值 30 31 参数： 32 header： 响应头的key（字符串类型） 33 34 返回值： 35 响应头中指定的header对应的值 36 37 void abort() 38 39 终止请求
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...
原生ajax示例
ajax.html
<body><input type="text" /><input type="button" value="Ajax1" οnclick="Ajax1();" /><script>function Ajax1(){var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象xhr.open('GET','/ajax_json/',true);xhr.onreadystatechange = function(){if(xhr.readyState == 4){// 接收完毕var obj = JSON.parse(xhr.responseText);console.log(obj)}};xhr.setRequestHeader('k1','v1'); // 设置数据头xhr.send("name=root;pwd=123");}</script> </body>
urls.py
url(r'^ajax_json/', views.ajax_json),url(r'^ajax/', views.ajax),
views.py
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),status=404,reason='Not Found') # 定义状态码及状态信息return HttpResponse(json.dumps(ret))
上面发送的是GET请求，如果是POST请求呢？
如上如果是POST请求，views里print(request.POST)是没有数据的，因为POST请求需要给加上请求头。
<script>function Ajax1(){var xhr = new XMLHttpRequest(); // 创建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'); // 设置数据头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');xhr.send("name=root;pwd=123");}</script>
兼容性问题
以下几种写法，都是一样的效果
> XMLHttpRequest XMLHttpRequest() > window.XMLHttpRequest XMLHttpRequest() > window['XMLHttpRequest'] XMLHttpRequest()
- XmlHttpRequest IE7+, Firefox, Chrome, Opera, etc.
- ActiveXObject(“Microsoft.XMLHTTP”) IE6, IE5
<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>
jQuery的ajax
如果在jQuery的ajax的回调函数里，再写上一些参数，里面的参数接收的就是xmlHttpRequest对象，功能和上面是一模一样的。
2、伪ajax（iframe标签）
iframe标签，会把网址嵌套在网页中，iframe里的网址更改，网页是不刷新的。
<iframe src="http://blog.csdn.net/fgf00"></iframe>
示例：输入http://……网址，跳转
1 <body> 2 <input type="text" id="url" /> 3 <input type="button" value="Iframe请求" οnclick="iframeRequest();" /> 4 <iframe src="http://blog.csdn.net/fgf00" id="ifm"></iframe> 5 6 <script src="/static/jquery-1.12.4.js"></script> 7 <script> 8 function iframeRequest(){ 9 var url = $('#url').val(); 10 console.log(url); 11 $('#ifm').attr('src',url); 12 } 13 </script> 14 </body>
示例：iframe伪ajax提交
可以把form提交转交给iframe，iframe提交，利用这个特性，实现伪ajax操作。
ajax.html
<form action="/ajax_json/" method="POST" target="ifm1">{% csrf_token %}<iframe id="ifm1" name="ifm1"></iframe><input type="text" name="username" placeholder="用户名"/><input type="text" name="email" placeholder="邮箱地址"/><input type="submit" value="Form提交"></form>
views.py
def ajax_json(request):print(request.POST)ret = {'code':True, 'data':request.POST.get('username')}import jsonreturn HttpResponse(json.dumps(ret))
阻止iframe里引用的网页自动跳转
在一些新版本的浏览器里，iframe标签居然自动跳转，禁用如下：
在iframe标签中增加两个属性：
security="restricted" sandbox=""
前者是IE的禁止js的功能，后者是HTML5的功能。刚好就可以让IE，Chrome，Firefox这三大浏览器都实现了禁止iframe的自动跳转。
iframe获取返回的数据
浏览器审查元素中，iframe加载的时候在document对象里，相当于一个上下文或者空间管理，在HTML里面又嵌套了一个HTML。不能通过以前的方法获取到。
iframe接收到服务端返回的数据后，会执行onload事件，获取返回数据如下：
<form action="/ajax_json/" method="POST" target="ifm1">{% csrf_token %}<iframe id="ifm1" name="ifm1" οnlοad="iframeLoad();"></iframe><input type="text" name="username" placeholder="用户名"/><input type="text" name="email" placeholder="邮箱地址"/><input type="submit" value="Form提交" οnclick="submitForm();"/></form><script src="/static/jquery-1.12.4.js"></script><script>function submitForm(){ // 当点击提交的时候，才给iframe绑定load事件// 比在html中这样添加好一点：<iframe name="ifm1" οnlοad="iframeLoad();"></iframe>$('#ifm1').load(function(){var text = $('#ifm1').contents().find('body').text(); // document对象下面的值var obj = JSON.parse(text);console.log(obj);})}function iiframeLoad(){console.log(123)}</script>
如果发送的是【普通数据】 : jQuery > XMLHttpRequest > iframe
3、ajax 文件上传（三种方式）及 图片预览
urls.py
url(r'^upload/$', views.upload),url(r'^upload_file/', views.upload_file),
views.py
def upload(request):return render(request,'upload.html')def upload_file(request):username = request.POST.get('username')fafafa = request.FILES.get('fafafa')import osimg_path = os.path.join('static/imgs/',fafafa.name)with open(img_path,'wb') as f:for item in fafafa.chunks():f.write(item)ret = {'code': True , 'data': img_path} # 返回文件路径（图片预览用）import jsonreturn HttpResponse(json.dumps(ret))
upload.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.upload{display: inline-block;padding: 10px;background-color: #2459A2; color: white;position: absolute;top: 0;bottom: 0;right: 0;left: 0;z-index: 90;}.file{width: 60px;height: 30px;opacity: 0;position: absolute;top: 0;bottom: 0;right: 0;left: 0;z-index: 100;}</style> </head> <body><div style="position: relative;width: 60px;height: 30px;"><input class="file" type="file" id="fafafa" name="afafaf" /><a class="upload">上传</a></div><input type="button" value="提交XHR" οnclick="xhrSubmit();" /><input type="button" value="提交jQuery" οnclick="jqSubmit();" /><hr/><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" οnclick="iframeSubmit();" value="iframe提交"/> <!--iframe方式提交--><hr>选中后，就上传、图片预览 <!--iframe方式提交，选中后，就上传，并图片预览--><input type="file" name="fafafa" οnchange="changeUpalod();" /> <!--iframe方式提交，选择后，就图片预览--></form><div id="preview"></div> <!-- 图片预览使用 --><script src="/static/jquery-1.12.4.js"></script><script>// 选中后，就上传文件，并图片预览function changeUpalod(){$('#ifm1').load(function(){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();} // 第二种方式：基于jQuery方式上传文件function jqSubmit(){// $('#fafafa')[0]var file_obj = document.getElementById('fafafa').files[0]; // files代表上传的文件var fd = new FormData(); // 相当于表单fd.append('username','root');fd.append('fafafa',file_obj);$.ajax({url: '/upload_file/',type: 'POST',data: fd,// 上传文件时，添加以下两个参数是告诉jQuery，不要做特殊处理processData: false, // tell jQuery not to process the datacontentType: false, // tell jQuery not to set contentTypesuccess:function(arg,a1,a2){console.log(arg);console.log(a1);console.log(a2); // 多写几个参数，这个参数包含xmlHttpRequest对象}})} // 第一种方式：基于xmlHttpRequest方式上传文件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);} // 第三种方式：基于iframe方式上传文件function iframeSubmit(){$('#ifm1').load(function(){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);})}</script> </body> </html>
xmlHttpRequest和jQuery上传文件，都是基于FormData，但是FormData对于IE一些低版本浏览器是不支持的。
一般情况下，上传图片、头像都是用iframe来实现的。
ajax操作，使用方式选择
如果发送的是【文件】 : iframe > jQuery(FormData) > XMLHttpRequest(FormData)
四、图片验证码
流程：
- 访问页面
`/login/- 创建一个图片并给用户返回
- Session存放验证码
- 用户POST提交数据，对比
实现：
页面生成返回和生成图片：生成网页html、生成图片url分开，这样更新验证码图片是，网页是不用刷新的。
views
1 from io import BytesIO 2 from django.shortcuts import HttpResponse 3 from utils.check_code import create_validate_code 4 5 def check_code(request): 6 """ 7 验证码 8 :param request: 9 :return: 10 """ 11 # 直接打开图片，返回 12 # data = open('static/imgs/avatar/20130809170025.png','rb').read() 13 # return HttpResponse(data) 14 15 # 通过模块生成图片并返回 16 # 1. 创建一张图片 pip3 install Pillow 17 # 2. 在图片中写入随机字符串 18 # obj = object() 19 # 3. 将图片写入到指定文件 20 # 4. 打开指定目录文件，读取内容 21 # 5. HttpResponse(data) 22 stream = BytesIO() # 在内存里开辟一块空间，在内存里直接读写，相当于打开一个文件 23 img, code = create_validate_code() 24 img.save(stream,'PNG') # 把生成的图片进行保存 25 request.session['CheckCode'] = code # 把验证码放入session中 26 return HttpResponse(stream.getvalue()) # 在内存中读取并返回
create_validate_code
font_type="Monaco.ttf", # 依赖的字体
html
<img src="/check_code.html" οnclick="changeCheckCode(this);"> <script>function changeCheckCode(ths){ths.src = ths.src + '?'; // URL不变：浏览器不发请求；加上？号，get参数请求，向后台发请求} </script>
check_code.py(依赖：Pillow,字体文件)
pip3 install Pillow
五、KindEditor富文本编辑器
常用的富文本编辑器：CKEditor,UEEditor，TinyEditor,KindEditor
进入KindEditor官网
文件夹说明
├── asp asp示例 ├── asp.net asp.net示例 ├── attached 空文件夹，放置关联文件attached ├── examples HTML示例 ├── jsp java示例 ├── kindeditor-all-min.js 全部JS（压缩） ├── kindeditor-all.js 全部JS（未压缩） ├── kindeditor-min.js 仅KindEditor JS（压缩） ├── kindeditor.js 仅KindEditor JS（未压缩） ├── lang 支持语言 ├── license.txt License ├── php PHP示例 ├── plugins KindEditor内部使用的插件 └── themes KindEditor主题
<textarea name="content" id="content"></textarea><script src="/static/jquery-1.12.4.js"></script> <script src="/static/plugins/kind-editor/kindeditor-all.js"></script> <script>$(function () {initKindEditor();});function initKindEditor() {var kind = KindEditor.create('#content', {width: '100%', // 文本框宽度(可以百分比或像素)height: '300px', // 文本框高度(只能像素)minWidth: 200, // 最小宽度（数字）minHeight: 400 // 最小高度（数字）});} </script>
http://kindeditor.net/docs/option.html
items¶ # 配置显示多少个工具 noDisableItems¶ # designMode 为false时，要保留的工具，置灰 filterMode¶ # true时根据 htmlTags 过滤HTML代码，false时允许输入任何代码。 resizeType¶ # 2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。 syncType¶ # 设置”“、”form”，值为form时提交form时自动提交，空时不会自动提交。 uploadJson¶ # 指定上传文件的服务器端程序。 autoHeightMode¶ # 内容多时，自动调整高度。
uploadjson
<textarea id="content"></textarea><script src="/static/jquery-1.12.4.js"></script> <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> <script>KindEditor.create('#content', {uploadJson: '/upload_img/',fileManagerJson: '/file_manager/', // 文件管理路径allowImageRemote: true, // 是否允许远程上传allowImageUpload: true, // 是否允许本地上传allowFileManager: true, // 图片空间，文件预览功能extraFileUploadParams: { // CSRF限制，提交csrfcsrfmiddlewaretoken: "{{ csrf_token }}"},filePostName: 'fafafa' // 设置文件发送的name值，方便后台获取});}) </script>
def upload_img(request):request.GET.get('dir')print(request.FILES.get('fafafa'))# 获取文件保存import jsondic = {'error': 0,'url': '/static/imgs/20130809170025.png','message': '错误了...'}return HttpResponse(json.dumps(dic))import os, time, json def file_manager(request):"""文件管理，照片空间:param request::return:"""dic = {}root_path = 'C:/Users/Administrator/PycharmProjects/day24/static/'static_root_path = '/static/'request_path = request.GET.get('path')if request_path:abs_current_dir_path = os.path.join(root_path, request_path)move_up_dir_path = os.path.dirname(request_path.rstrip('/'))dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_pathelse:abs_current_dir_path = root_pathdic['moveup_dir_path'] = ''dic['current_dir_path'] = request_pathdic['current_url'] = os.path.join(static_root_path, request_path)file_list = []for item in os.listdir(abs_current_dir_path):abs_item_path = os.path.join(abs_current_dir_path, item)a, exts = os.path.splitext(item)is_dir = os.path.isdir(abs_item_path)if is_dir:temp = {'is_dir': True,'has_file': True,'filesize': 0,'dir_path': '','is_photo': False,'filetype': '','filename': item,'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))}else:temp = {'is_dir': False,'has_file': False,'filesize': os.stat(abs_item_path).st_size,'dir_path': '','is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,'filetype': exts.lower().strip('.'),'filename': item,'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))}file_list.append(temp)dic['file_list'] = file_listreturn HttpResponse(json.dumps(dic))
