ajax完整实例前后端处理

提取自该博文在线中文字符识别网站(前后端分离 REST)
单独分析总结

Ajax完成图像后端的传输以及显示从后端返回的结果

定义FormData类型

(是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。)

 formdata = new FormData(); // 定义formdata变量 Formdata是不是特殊的数据类型

用jquery获取上传表单中的图片数据

var file = $('#photo')[0].files[0]; // 把图片数据用file变量表示

封装到创建的FormData对象中

  formdata.append('image',file); // 把图片数据封装到formdata变量中

使用jquery构造ajax请求

 $.ajax({
            url:'/ocr/', // 发送地址是ocr url地址写错/ocr 导致Not Found: /ocr；地址后还要加/
            type:'POST', // 发送方式是post
            data:formdata, //发送的数据是formdata
            dataType:'json', // 数据类型是json
            processData:false, 
            contentType:false,
            success:ShowResult //收到结果后，执行ShowResult函数，将输出文本的值改为识别到的文字信息
        })

前端页面通过showResult函数获得后端传来的信息在渲染到前端指定页面处

function ShowResult(data){
        output.value = data['output'];
    }

补充后端获取前端图片数据的方法,通过判断request请求是否为post请求来处理；request.FILES["image"]中的image是FormData封装的数据类型为字典的键，用该键获取值

    if request.method == 'POST':
        img = read_image(stream = request.FILES["image"])

后端处理图片后返回数据给前端;返回的字段是output键，前端读取数据从showResult函数中的data对象读取

code = pytesseract.image_to_string(img,lang='chi_sim')
result.update({"output":code}) # ()内加了引号，字典外加引号，这错误哎;这里字典只要值加""，键不需要

完整处理图片代码

# 将所有的静态资源文件按照文件夹路径创建对应的视图处理函数
# 以文件读取方式获取文件内容并通过HttpResponse返回
# 我并没有用django模板创建文件，这个只是我搭建罢了
# 调用django属性，创建静态资源路径
import numpy as np # numpy不会有，至少要会用来图像分割
import urllib # 也不熟，很少用他做爬虫
import json # json数据返回的包
import cv2 # 要学的，重点，但我不会
import pytesseract # 文字识别包
from PIL import Image # 图像处理的
import os
from django.views.decorators.csrf import csrf_exempt # 防止啥csrf_什么的攻击
from django.http import JsonResponse

def read_image(stream=None):
    data_temp = stream.read()
    image = np.asarray(bytearray(data_temp),dtype = 'uint8') # 将输入转为矩阵格式
    image = cv2.imdecode(image,cv2.IMREAD_COLOR) # cv2处理不知
    return image

@csrf_exempt # 用于规避跨站点请求攻击
def ocrDetect(request):
    result = {'code':None}
    if request.method == 'POST':
        img = read_image(stream = request.FILES["image"])
        # OpenCV转PIL
        # frommarry写错他显示白色，就代表他不是函数；fromarray才是
        # COLOR_BAYER_BG2BGR写错这是编辑器快速提示时没看直接选的
        img = Image.fromarray(cv2.cvtColor(img,cv2.COLOR_BGR2RGB))
        # 执行识别
        code = pytesseract.image_to_string(img,lang='chi_sim')
        result.update({"output":code}) # ()内加了引号，字典外加引号，这错误哎;这里字典只要值加""，键不需要
    return JsonResponse(result)

完整ajax代码

<script>
    // 图像发送至后台服务器进行识别
    $('#recognition').click(function(){
        formdata = new FormData(); // 定义formdata变量 Formdata是不是特殊的数据类型
        var file = $('#photo')[0].files[0]; // 把图片数据用file变量表示
        formdata.append('image',file); // 把图片数据封装到formdata变量中
        $.ajax({
            url:'/ocr/', // 发送地址是ocr url地址写错/ocr 导致Not Found: /ocr；地址后还要加/
            type:'POST', // 发送方式是post
            data:formdata, //发送的数据是formdata
            dataType:'json', // 数据类型是json
            processData:false, 
            contentType:false,
            success:ShowResult //收到结果后，执行ShowResult函数，将输出文本的值改为识别到的文字信息
        })

    })
    
</script>
<!--返回结果显示-->
<script>
    function ShowResult(data){
        output.value = data['output'];
    }
</script>