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

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 求micropython modbus-RTU 从机的代码或库?
  • ¥15 铜与钢双金属板叠加在一起每种材料300mm长,18mm宽,4mm厚一端固定并加热至80℃,当加热端温度保持不变时另一端的稳态温度。ansys
  • ¥15 django5安装失败
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥15 ANSYS分析简单钎焊问题
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上