Hey,天还没亮，夜猫子，要注意身体哦！

JS异步请求和ASP.NET一般处理程序处理异步请求

发布于2017-12-31 分类：jQuery / JS / 后端 评论(0) 阅读(2,834)
　　　

    今天是2017年的最后一天，博客已经长草有大半年了。最近发现百度的人工智能服务挺不错，比如文字识别、语音识别，很多都有免费使用额度，我试了文字识别的高精度版（每天免费50次）识别准确率挺高。

baidu_ocr

    这篇文章是关于异步请求的，我就以异步调用百度OCR的API来写，怎么申请我就不写了，百度帐号申请就能用。

一般处理程序（.ashx）

    以最简单的get请求为例，一般处理程序先获取请求链接中的参数，再根据参数进行业务逻辑处理和数据访问，最后返回结果（最常用就是返回JSON格式数据）。

  1. context.Response.ContentType = "text/plain";  
  2. string action = context.Request.QueryString["action"];  
  3. switch (action)  
  4. {  
  5.     case "getTxtByUrl":  
  6.         getTxtByUrl(context);  
  7.         break;  
  8.   
  9.     case "getTxtByPath":  
  10.         getTxtByPath(context);  
  11.         break;  
  12.   
  13.     case "getTxtByPathHigh":  
  14.         getTxtByPathHigh(context);  
  15.         break;  
  16.   
  17.     default:  
  18.         break;  
  19. }  

    上面的代码就是先获取提交数据中“action”的参数，若参数为“getTxtByPathHigh”，则调用getTxtByPathHigh(context)函数进行处理：

  1. public void getTxtByPathHigh(HttpContext context)  
  2.         {  
  3.             // 设置APPID/AK/SK  
  4.             var APP_ID = "******";  
  5.             var API_KEY = "******";  
  6.             var SECRET_KEY = "******";  
  7.   
  8.             var client = new Baidu.Aip.Ocr.Ocr(API_KEY, SECRET_KEY);   
  9.             var path = @context.Request.QueryString["path"];  //path参数
  10.             var image = File.ReadAllBytes(path);   //本地图片
  11.             var result = client.AccurateBasic(image);  
  12.             context.Response.Write("[" + result + "]");  
  13.         }  

    由于百度OCR返回的不是JSON数组，所以我在两端加上“[]”。

待识别的图片：

baiduImg

    访问：http://localhost:58686/ajax.ashx?action=getTxtByPathHigh&path=D:%5CBackup%5C%E6%88%91%E7%9A%84%E6%96%87%E6%A1%A3%5CVisual%20Studio%202017%5CProjects%5COCR%5CWeb%5Cimg%5Csnipaste_20171231_184443.jpg（图片的本地路径需要先编码）得到的处理结果如下：

ocr_result

JS发送AJAX请求

    直接用一个文本框获取带识别的图片的路径，点击按钮开始请求AJAX，最后将返回的结果写在页面上（我这里采用JQuery处理）：

  1. $("#btnTransform").click(function () {  
  2.         imgUrl = encodeURI($("#inputUrl").val());  
  3.         console.log(path + imgUrl);  
  4.         $.ajax({  
  5.             type: "get",  
  6.             async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）  
  7.             url: path + imgUrl,    //请求发送到ashx处  
  8.             data: {},  
  9.             dataType: "json",  
  10.             beforeSend: function () {  //得到结果前
  11.                 $('#tips').text('正在处理，请稍等！');  
  12.                 $("#outTxt").val("");  
  13.             },  
  14.             success: function (result) {  //成功返回数据
  15.                 words_result_num = result[0].words_result_num;  
  16.                 if (words_result_num > 0) {  
  17.                     var img = $("#inputUrl").val();  
  18.                     $("#imgDisplay").html("<img src=http://localhost:58686/img/" + img.slice(55, 100)  + " />");  
  19.                     for (var i = 0; i < words_result_num; i++) {  
  20.                         $("#outTxt").val($("#outTxt").val() + result[0].words_result[i].words + "\r");  
  21.                         $('#tips').text('处理完毕！');  
  22.                     }  
  23.                 }  
  24.                 else {  
  25.                     $('#tips').text("错误代码：" + result[0].error_code + "，错误信息：" + result[0].error_msg);  
  26.                 }  
  27.             },  
  28.             Error: function (errorSsg) {  //请求失败
  29.                 $('#tips').text('出现错误！');  
  30.             }  
  31.   
  32.         });  
  33.   
  34.         return false;  
  35.     });  

简单的文字识别页面：

ocr_result2

以上就是整个异步的过程，代码非常简单，另外百度OCR的免费额度对于普通用户来说够用了。

未经允许不得转载：Rising Sun's Blog » jQuery / JS / 后端 » JS异步请求和ASP.NET一般处理程序处理异步请求
标签：
评论 0
 
 
发表评论