使用ajax完成python flask前端與後臺資料的互動
阿新 • • 發佈:2019-01-03
一、前端頁面中
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')