一、前端页面中
html文件中:
{% extends 'base.html' %}
{% block scripts %}
{{ super() }}
{# <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>#}
<script src="{{ url_for('static', filename='js/jquery-1.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">
$(function() {
//实现加法通过jquery
$('.SUM').bind('click', function() {
$.getJSON( '/_add_numbers', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
}, function(data) {
$(".result").text(data.result);
});
return false;
});
//通过jquery获得flask路由里面的json数据
{# $.getJSON('/_add_numbers',function(data){#}
{# $(".result").text(data.result);#}
{# });#}
});
</script>
{% endblock %}
{% block content %}
{{ super() }}
<h1>jQuery Example</h1>
<p><input type=text size=5 name=a> +
<input type=text size=5 name=b> =
<span class='result'>?</span>
<p><a href=# class='SUM'>点击开始计算</a>
{% endblock %}
flask路由函数中
@check_info.route('/_add_numbers') def add_numbers(): a = request.args.get('a', 0, type=int) b = request.args.get('b', 0, type=int) tt=jsonify(result=a + b) return tt @check_info.route('/weather',methods=['POST','GET']) def weather(): list = [1, 2, 3, 4, 5, 6] # return jsonify(month=[x for x in list]) return render_template('jso.html')
二、直接从flask路由函数中获取json数据然后渲染在前端页面中
{% extends 'base.html' %} {% block scripts %} {{ super() }} {# <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>#} <script src="{{ url_for('static', filename='js/jquery-1.7.1.min.js') }}"></script> <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script> <script type="text/javascript"> $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; </script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据并显示 myChart.setOption ({ title: { text: '' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [20,3,32,45,11,45] }] }); //异步加载数据 $(function(){ $.get('/weather',function (data) { myChart.setOption({ title: { text: '成绩预览' }, xAxis: { data:data.month } }); }); }); </script> {% endblock %} {% block content %} {{ super() }} <div class="container"> {{ st }} <div id="main" style="width: 600px;height:400px;"></div> </div> {% endblock %}
flask路由函数中@check_info.route('/weather',methods=['POST','GET']) def weather(): list = [1, 2, 3, 4, 5, 6] return jsonify(month=[x for x in list]) @check_info.route('/ch') def ch(): return render_template('charts.html')