异步ajax实例

最新推荐文章于 2023-07-10 11:29:07 发布

吃饭-睡觉-打豆豆

最新推荐文章于 2023-07-10 11:29:07 发布

阅读量179

点赞数

分类专栏： python实例文章标签： jquery ajax

本文链接：https://blog.csdn.net/weixin_45768244/article/details/109027079

版权

python实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

templates下的Ajaxlineflask.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Ajaxline</title>
    <style type="text/css">
    	*{
    		margin:0px;
    	}
    	#main{
    		height:400px;
    	}
    </style>
</head>
<body>
	<div id="main" style="width: 600px; height: 400px;"></div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths:{
				echarts:'https://echarts.baidu.com/build/dist'
			}
		});
		require(['echarts','echarts/chart/line'],
			function(ec){
				var mychart=ec.init(document.getElementById('main'));
				var option={
					title:{
					    text:'未来一周气温的变化',
						subtext:'广东省气象局'
				    		},
				    legend:{
						data:['最高气温','最低气温']
				    		},
					tooltip:{trigger:'axis'},
				    xAxis:[{
						type:'category',
						boundaryGap:false,
						data:[]
				    		}],
				    yAxis:[{
						type:'value'
				    		}],
				    series:[{
						name:'最高气温',
						type:'line',
						itemStyle:{normal:{areaStyle:{type:'default'}}},
						smooth:'true',
						data:[],
						markPoint:{
							data:[
								{type:'max',name:'最大值'},
								{type:'min',name:'最小值'}
				    				]
				    			}
				    		},
				    		{
				    			name:'最低气温',
				    			type:'line',
								itemStyle:{normal:{areaStyle:{type:'default'}}},
								smooth:'true',
				    			data:[],
				    			markPoint:{
				    				data:[
					    				{type:'max',name:'最大值'},
					    				{type:'min',name:'最小值'}
				    				]
				    			}
				    		}]
		};
		$.ajax({
            type:"GET",
            url:"http://127.0.0.1:5222/lineApi",
            success:function(data){
                console.log(data);
                option['xAxis'][0]['data']=data['xData'];
                option['series'][0]['data']=data['yDataHeight'];
                option['series'][1]['data']=data['yDataLow'];
                mychart.setOption(option);
            }
        });
        myChart.setOption(option);
	});
	</script>
</body>
</html>

app.py代码

from flask import Flask
from flask import redirect,render_template,jsonify

app=Flask(__name__)

@app.route('/')
def hello_world():
    return redirect('lineFlask')

@app.route('/lineFlask')
def line_get_flask():
    return render_template('Ajaxlineflask.html')

@app.route('/lineApi')
def list_get_api():
    return jsonify({
        "xData": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        "yDataHeight": [11, 11, 15, 13, 2, 13, 10],
        "yDataLow": [1, -2, 2, 5, 3, 2, 0]
    })

if __name__=='__main__':
    # app.run(app.run(debug=True,port=5222,host='127.0.0.1'))
    app.run("127.0.0.1", 5222, True)

吃饭-睡觉-打豆豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
异步ajax实例

templates下的Ajaxlineflask.html<!DOCTYPE html><head> <meta charset="utf-8"> <title>Ajaxline</title> <style type="text/css"> *{ margin:0px; } #main{ height:400px; } </sty
复制链接

扫一扫

专栏目录