AI展示框架(5):基于ajax + flask restful实现界面友好请求_ajax 请求flask-restful_sparkexpert的博客-程序员宅基地

技术标签: AI展示框架  大数据智能  flask  ajax  

flask程序提供了一种比较方便的render_template方法,可以实现对页面中一些结果的呈现。然而这种呈现方式需要以刷新整个页面为代价,非常不利于结果的呈现,特别是当页面中除了结果呈现的元素外,一些其他元素可能会面临被刷掉的问题。因此需要设置ajax模式来实现界面的友好请求处理。

具体策略如下:(以中文分词展示界面为例)

特别注意:{ { super() }}这一行必须呈现,从而引用上一层所有的js脚本,否则就会出现错误的现象。

{% block scripts %}
    	{
   { super() }}
		<script type="text/javascript">
	        $('#form_args').submit(function(e) {
	                e.preventDefault();
	                var data = {};
	                var Form = this;
	                $.each(this.elements, function(i, v) {
	                    var input = $(v);
	                    data[input.attr("name")] = input.val();
	                    delete data["undefined"];
	                });
	                $.ajax({
	                    type: 'POST',
	                    url: "/api/nlp/cws",
	                    dataType: 'json',
	                    contentType: 'application/json; charset=utf-8',
	                    data: JSON.stringify(data),
	                    context: Form,
	                    success: function(callback) {
	                        console.log(callback);
	                        // Watch out for Cross Site Scripting security issues when setting dynamic content!
	                        //$('#seg_result').text(callback.seg_result);
	                        $("#seg_result").text(callback.seg_result)
	                    },
	                    error: function() {
	                        $(this).html("error!");
	                    }
	                });
	            });
        </script>
	{% endblock %}

其对应的/api/nlp/cws的接口处理如下:

 # 中文分词
    @app.route('/api/nlp/cws', methods=['POST'])
    def nlp_api_cws():
        json = request.get_json()
        arch = json['selectmodel']
        text = json['sentences']
        seg_result = nlp_basic.Chinese_Segment(text, method=arch)
        return jsonify(seg_result=seg_result)
  

通过上述方法,就可以实现对结果的页面无刷新呈现,使得交互更加友好。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sparkexpert/article/details/89883826

智能推荐

通过OpenNI2获取数据并转至OpenCV格式及点云生成-程序员宅基地

OpenNI简介OpenNI(Open Natural Interaction)中文译为开放自然语言交互,用官方的表述来讲就是a standard framework for 3D sensing,用于3D感知的开发接口。OpenNI2是第二代版本(官网 http://structure.io/openni),相对于第一代更加专注于对3D设备的支持和数据的获取,移除了手势识别等中间件的方式,使...

【王道机试】查找-打印极值点下标-北京大学_找出数据中极值的下标_qmkn的博客-程序员宅基地

OJ:打印极值点下标描述在一个整数数组上,对于下标为i的整数,如果它大于所有它相邻的整数, 或者小于所有它相邻的整数,则称为该整数为一个极值点,极值点的下标就是i。输入描述:第一行是此数组的元素个数k(4<k<80),第二行是k个整数,每两个整数之间用空格分隔。输出描述:每个案例输出为n行:每行对应于相应数组的所有极值点下标值,下标值之间用空格分隔。示例1输入:1010 12 12 11 11 12 23 24 12 121512 12 122 112 222 211 2_找出数据中极值的下标

图像运算——阈值处理之adaptiveThreshold函数_th6 = cv2.adaptivethreshold( img, 255, cv2.adaptiv-程序员宅基地

自适应阈值处理案例 Fu Xianjun. All Rights Reserved.对于色彩均衡的图像,直接使用一个阈值就能完成对图像的阈值化处理。但是,有时图像的色彩是不均衡的,此时如果只是使用一个阈值,就无法得到清晰有效的阈值分割结果图像。OpenCV提供了函数cv2.adaptiveThreshold()来实现自适应阈值处理。素材:adaptiveThreshold函数:dst = cv2.adaptiveThreshold(src, maxValue, adaptiveMethod,_th6 = cv2.adaptivethreshold( img, 255, cv2.adaptive_thresh_mean_c, cv2.thres

Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-res_dalter的博客-程序员宅基地

idea打包错误 : 报错Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-res[错误]无法执行目标org.apache.maven网站.插件:maven资源插件:3.2.0:project xcx上的资源(默认资源):插件org.apache.maven网站.插件:maven资源插件:3.2.0需要Maven版本3.1.0->[帮助1]<.._failed to execute goal org.apache.maven.plugins:maven-source-plugin:3.3.0:ja

android.app.Activity---中文-程序员宅基地

Android.app.ActivityActivity是用户主要也是唯一打交道的途径。基本上所有的Activity都是和用户打交道的,你可以通过setContentView(View)来创建一个窗口。Activity常常是以全窗口的模式展示的,当然也有其他的展示方式:浮动窗口(windowIsFloating)或则嵌入到其他Activity(ActivityGroup)。基本上所有子类都会重...

BUUCTF-PWN刷题记录-13(静态编译+去除调试符号)-程序员宅基地

目录[中关村2019]one_string(unlink)[中关村2019]one_string(unlink)看这个保护,我以为很简单,然而···这题去除了所有符号,并且是静态编译,所以第一步就是把主要函数找出来,如下在edit函数中,程序会重新计算content的长度,这个时候如果利用了chunk复用,下一个chunk的size也会被计算进长度,这样下次编辑的时候就能覆盖si...

随便推点

如何使用单片机控制直流有刷电机,制作遥控小车(船),以STM32为例(第一节)_基于stm32的遥控小船_Mr_Hanc_Tiskor的博客-程序员宅基地

五分钟学会如何使用单片机控制直流有刷电机,制作小车(船),以STM32为例(第一节)概述当今中国大学很多信息类专业的学生在大一大二都面对过一个难题——科技创新项目。本科学校尤其注重基础教育,相比专科学校刚大一就教C语言,单片机,本科学生在大一大二还在学微积分,线性代数,电路,模电数电等,对专业知识所知甚少。这时的科技项目对于那些没有加入实验室的同学就显得太难了。一些没有大佬带的同学只能选择上网买一个成品,或者找人代做项目。如果当初选题时选了个偏门的题目,没法找人代做或购买成品,那最后只能选择放弃。我当_基于stm32的遥控小船

ubi and ubifs应用手记_config_ubifs_fs_lzo-程序员宅基地

1.配置ubi and ubifsin .config CONFIG_MTD_UBI=y CONFIG_UBIFS_FS=y CONFIG_CRYPTO_ALGAPI=y CONFIG_CRYPTO_DEFLATE=y CONFIG_CRYPTO_LZO=y CONFIG_CRC16=y CONFIG_LZO_COMPRESS=y CONFIG_LZO_DECOMPRESS=y注意:如果配置成模块(=m),_config_ubifs_fs_lzo

初识asio_asio库_编程界的谢菲尔德的博客-程序员宅基地

asio 库基于操作系统提供的异步机制,采用前摄器设计模式(Proactor)实现了可移植的异步(或者同步)I/O操作,而且并不要求使用多线程和锁,有效地避免了多线程编程带来的诸多有害副作用(如条件竞争、死锁等)。同步模式:在同步模式下,程序发起一个I/o操作,向io_service提交请求,io_service把操乍转交给操作系统,同步地等待。当I/o操作完成时,操作系统通知io_service,然后io_service 再把结果发回给程序,完成整个同步流程。_asio库

用ant打包可运行的jar文件 (将第三方jar包放进你自己的jar包)_ant 打jar-程序员宅基地

用ant打包可运行的jar文件(将第三方jar包放进你自己的jar包)Jar文件的运行方式直接双击或者Java –jar xxxx.jar要能直接运行必须在jar包下的MANIFEST.MF文件中添加入口类,就是带Main函数的。例如:Main-Class: com.safx.processor.Starter在MANIFEST.MF文件中添加了Main-Class这个属性,在_ant 打jar

蓝牙的server和client_蓝牙客户端和蓝牙服务器区别_宁静以致墨的博客-程序员宅基地

通俗地说吧,Server(服务器)就是数据中心,Client(客户端)就是访问数据者。特别说明,它与主/从设备是独立的概念:一个主设备既可以充当Server,又可以充当Client;从设备亦然Server首先将一个服务按“属性/句柄/数值/描述”这种格式予以组织,然后调用API函数GATTServApp_RegisterService将服务数据进行注册。举个实例吧,设提供一个电池电量服务字节,它允许Client读取,数据为一个8比特无符号数(0~100%),它的组织如下:022500192A,..._蓝牙客户端和蓝牙服务器区别

UCOS-II任务管理_ucos taskquery-程序员宅基地

uC/OS-II任务管理:  µC/OS-Ⅱ可以管理多达 64 个任务,并从中保留了四个最高优先级和四个最低优先级的任务供自己使用,所以用户可以使用的只有 56 个任务。任务的优先级越高,反映优先级的值则越低。任务的创建:OSTaskCreate()和OSTaskCreateExt()  OSTaskCreateExt()是 OSTaskCreate()的扩展版本,提供了一些附_ucos taskquery

推荐文章

热门文章

相关标签