AI展示框架(5):基于ajax + flask restful实现界面友好请求

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)
  

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值