nat_pagle 2022-03-17 22:32 采纳率: 66.7%
浏览 90
已结题

flask如何用jquery做到同步后端随时更新的数据

前端
ssgx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<body>
<input type="checkbox" checked id="1">实时更新
<br>
<textarea id="t" style="width: 100px; height: 20px;rows=10;"></textarea>
更新<input type="button"  id="r">
</body>
<script>
    $('#r').click(function(){
        var url='/a';
        var s={};

        $.post(url,s,function(refresh){
                        if($('#1').is(':checked')) {
                        s.t=refresh.t;
                        setInterval(
                            function startRequest() {

                            $('#t').val(s.t);
        }, 500);

                    }
                    else{

                        $('#t').val(refresh.h);
                    }

        })

    })
</script>
</html>

后端ssgx.py

from flask import Flask, render_template,jsonify

from threading import Thread

import time

count = 0


def foo():
    global count
    while True:
        time.sleep(1)
        count += 1
        print(count)


t1 = Thread(target=foo)
t1.start()




app = Flask(__name__)

app.secret_key = 'x'


class Config(object):
    DEBUG = True



app.config.from_object(Config)


@app.route('/', methods=['GET', 'POST'])
def index():
    return render_template('ssgx.html')


@app.route('/a', methods=['GET', 'POST'])
def refresh():

    data = {//t模拟一直更新的数据
        't': count,
        'h': 'h20'
    }
    return jsonify(data)


if __name__ == '__main__':
    app.run()


前端同步时有问题,如何改动代码能够使得自动更新勾选时,可以点击一次更新按钮后,textarea中不用点击更新,可以一直自动同步更新后台数据(t模拟的是一直更新的数据)

  • 写回答

2条回答 默认 最新

  • 关注

    用setInterval定时器来实时更新
    你题目的解答代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <body>
    <input type="checkbox" checked id="1">实时更新
    <br>
    <textarea id="t" style="width: 100px; height: 20px;rows=10;"></textarea>
    更新<input type="button"  id="r">
    </body>
    <script>
        $('#r').click(function(){
            var url='/a';
            var s={};
            $.post(url,s,function(refresh){
                $('#t').val(refresh.h);
            })
        })
        setInterval(function(){
            if($('#1').prop("checked"))
                $('#r').click();
        }, 2000);
    </script>
    </html>
     
    

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月1日
  • 已采纳回答 3月24日
  • 创建了问题 3月17日

悬赏问题

  • ¥15 如何对参数分析结构进行绘图
  • ¥15 做一个满足376和698规约的集中器程序
  • ¥50 python如何用抖音这个接口输入抖音ID查询用户信息
  • ¥30 关于移动Web网页使用TinyMCE富文本编辑器上传图片后的光标定位、压缩等几个问题如何解决:
  • ¥40 activeMq在同服务器centos8下消费很慢
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗