使用ajax完成python flask前端与后台数据的交互
来源:互联网 发布:红叶知弦小说 编辑:程序博客网 时间:2024/05/29 15:55
一、前端页面中
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')
阅读全文
1 0
- 使用ajax完成python flask前端与后台数据的交互
- 前端与后端的数据交互(jquery ajax+python flask)
- 前端和后端的数据交互(jquery ajax+python flask+mysql)
- 使用springmvc实现网页前端与后台的数据交互
- django 后台与前端js数据交互对ajax封装
- ajax前台与后台的数据交互
- Extjs学习总结之11前端与后台的数据交互ajax
- ajax与后台数据交互
- 简单的ajax前端与node.js后台交互
- 前端后台交互$.ajax() $.post() $.get()的使用
- 前端与后台的交互
- Ajax与后台的交互
- web前端与后台数据交互--Json
- 浅谈web前端与后台数据交互
- web前端与后台数据交互
- 利用ajax提交表单,实现数据前端后台数据交互的完整流程演示
- SpringMVC+Hibernate利用ajax实现前端后台数据交互
- 实现可编辑单元格(使用Ajax完成后台交互)。
- 最全Pycharm教程(32)——根据FHS在Linux上安装Pycharm
- Centos下安装Nginx
- 【2017新疆网络赛】C Coconut
- Spring Cloud Zuul微服务网关的API限流
- HDU Number Sequence (KMP模板)
- 使用ajax完成python flask前端与后台数据的交互
- Hbase的安装部署及基本语法
- HDU 6201 树形DP
- JFinal上传文件时用getFile()方法报错
- Nginx配置详解
- XML的使用
- 谁知道vimrc中的这条横线是vimrc中的哪一条?看着好别扭
- C++单元测试(Unit Test)中Catch和Gmock的结合使用
- HDU 6194 后缀数组+lcp+rmq