使用ajax完成python flask前端与后台数据的交互

你的名字 2022-06-08 04:40 187阅读 0赞

一、前端页面中

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')