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

sparkexpert

发布于 2019-05-26 14:13:34

4100

发布于 2019-05-26 14:13:34

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)

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年05月06日，如有侵权请联系 cloudcommunity@tencent.com 删除

flask