Django 之 Ajax、Picture-Verification-Code、KindEditor使用

一、Ajax操作

ajax操作基于浏览器的xmlHttpRequest对象，IE低版本是另外一个对象。

1、原生Ajax操作

XmlHttpRequest对象介绍

• XmlHttpRequest对象的主要方法：

  void open(String method,String url,Boolen async)
  用于创建请求

  参数：
  method： 请求方式（字符串类型），如：POST、GET、DELETE...
  url： 要请求的地址（字符串类型）
  async： 是否异步（布尔类型）

  void send(String body)
  用于发送请求

  参数：
  body： 要发送的数据（字符串类型）

  void setRequestHeader(String header,String value)
  用于设置请求头

  参数：
  header： 请求头的key（字符串类型）
  vlaue： 请求头的value（字符串类型）

  String getAllResponseHeaders()
  获取所有响应头

  返回值：
  响应头数据（字符串类型）

  String getResponseHeader(String header)
  获取响应头中指定header的值

  参数：
  header： 响应头的key（字符串类型）

  返回值：
  响应头中指定的header对应的值

  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...

原生ajax示例

ajax.html

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请求需要给加上请求头。

兼容性问题

以下几种写法，都是一样的效果

> XMLHttpRequest
XMLHttpRequest()
> window.XMLHttpRequest
XMLHttpRequest()
> window['XMLHttpRequest']
XMLHttpRequest()

• XmlHttpRequest
  IE7+, Firefox, Chrome, Opera, etc.

• ActiveXObject(“Microsoft.XMLHTTP”)
  IE6, IE5

jQuery的ajax

如果在jQuery的ajax的回调函数里，再写上一些参数，里面的参数接收的就是xmlHttpRequest对象，功能和上面是一模一样的。

2、伪ajax（iframe标签）

iframe标签，会把网址嵌套在网页中，iframe里的网址更改，网页是不刷新的。

示例：输入http://……网址，跳转

示例：iframe伪ajax提交

可以把form提交转交给iframe，iframe提交，利用这个特性，实现伪ajax操作。

ajax.html

{% csrf_token %}

views.py

def ajax_json(request):
print(request.POST)
ret = {'code':True, 'data':request.POST.get('username')}
import json
return HttpResponse(json.dumps(ret))

阻止iframe里引用的网页自动跳转

在一些新版本的浏览器里，iframe标签居然自动跳转，禁用如下：

在iframe标签中增加两个属性：

security="restricted" sandbox=""

前者是IE的禁止js的功能，后者是HTML5的功能。刚好就可以让IE，Chrome，Firefox这三大浏览器都实现了禁止iframe的自动跳转。

iframe获取返回的数据

浏览器审查元素中，iframe加载的时候在document对象里，相当于一个上下文或者空间管理，在HTML里面又嵌套了一个HTML。不能通过以前的方法获取到。

iframe接收到服务端返回的数据后，会执行onload事件，获取返回数据如下：

{% csrf_token %}

ajax操作，使用方式选择

如果发送的是【普通数据】 : 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 os
img_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 json
return HttpResponse(json.dumps(ret))

upload.html

上传

---

---

选中后，就上传、图片预览

xmlHttpRequest和jQuery上传文件，都是基于FormData，但是FormData对于IE一些低版本浏览器是不支持的。

一般情况下，上传图片、头像都是用iframe来实现的。

ajax操作，使用方式选择

如果发送的是【文件】 : iframe > jQuery(FormData) > XMLHttpRequest(FormData)

二、图片验证码

流程：

• 访问页面 `/login/
  • 创建一个图片并给用户返回
  • Session存放验证码
• 用户POST提交数据，对比

实现：

页面生成返回和生成图片：生成网页html、生成图片url分开，这样更新验证码图片是，网页是不用刷新的。

views

from io import BytesIO
from django.shortcuts import HttpResponse
from utils.check_code import create_validate_code

def check_code(request):
"""
验证码
:param request:
:return:
"""
# 直接打开图片，返回
# data = open('static/imgs/avatar/20130809170025.png','rb').read()
# return HttpResponse(data)

通过模块生成图片并返回

1. 创建一张图片 pip3 install Pillow

2. 在图片中写入随机字符串

obj = object()

3. 将图片写入到指定文件

4. 打开指定目录文件，读取内容

5. HttpResponse(data)

stream = BytesIO() # 在内存里开辟一块空间，在内存里直接读写，相当于打开一个文件
img, code = create_validate_code()
img.save(stream,'PNG') # 把生成的图片进行保存
request.session['CheckCode'] = code # 把验证码放入session中
return HttpResponse(stream.getvalue()) # 在内存中读取并返回

create_validate_code

font_type="Monaco.ttf", # 依赖的字体

html

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主题

基本使用

详细参数

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

  def upload_img(request):
  request.GET.get('dir')
  print(request.FILES.get('fafafa'))
  # 获取文件保存
  import json
  dic = {
  '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_path

  else:
  abs_current_dir_path = root_path
  dic['moveup_dir_path'] = ''

  dic['current_dir_path'] = request_path
  dic['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_list
  return HttpResponse(json.dumps(dic))

---