页面无刷新更新数据

来源：互联网发布：linux操作系统移植编辑：程序博客网时间：2024/05/07 05:37

早在4年前（2013年，大三），我在学html、css、JavaScript的时候，就感觉那种不刷新页面，就能更新数据的技术好神奇。但是这么多年过去了，一直都没学过，其实感觉也没必要学这个。但它真的就像一个结，魂牵梦萦……

最近，准备在网页上做点演示的东西，大概是需要不断地更新数据。但真的是没有必要不停地把整个网页都刷了。于是就在网上找了点代码来抄了抄。

还专门打了电话请教了某个计算机系的同学，还和隔壁两个室友讨论了一下……

下面，就把今晚1个小时的抄袭成果放到CSDN上。

服务器端。用web.py实现。python3

web_server.py

# -*- coding:utf-8 -*-import webimport jsonimport randomurls = (    '/tasks/act', 'actions',# url --> controller)app = web.application(urls, globals())# 这是一个controllerclass actions:                def GET(self):        d = {'number':'2011210456',        'age':18,        'name':'qcy',         'mm':random.random()        }                   return json.dumps(d)  # 2. 也可以把一个dict直接用json.dumps转成json格式的字符串。# 1. 可以直接把json格式，当做字符串返回。这好像和servlet的printer.writer()很像。太久不用，已忘干净……#   return """{ #   "firstName": "比尔",#   "lastName": "Gates",#   "age": 60# }""" # # 在这里，把qcy和bill gates放到同一个地方，有那么一点不合适if __name__ == "__main__":    app.run()

此时，在cmd里面启动这个web_server.py，服务器端就已经开始工作了。

现在，在浏览器里面输入这个controller的url，就可以看见返回的json字符串了。

这个mm是一个随机数，每次都会变化，模拟变化的数据。

（请不要在意我收藏夹……）

html页面

<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8">                <style>            /* css 代码  */        </style>        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>            </head>    <body>        <script type="text/javascript">        function f(){    // 获取json数据      $.getJSON("/tasks/act",function(result){            document.getElementById("p1").innerHTML=result.name+" "+result.mm;        });    }    //每隔1秒自动调用方法，更新    window.setInterval(f, 1000); </script><h3>无刷新更新数据</h3><p id = "p1"></p></body></html>

Done！

虽然说，看起来页面没有刷新，但其实是在不断轮询的……

因为，你看，这是我的服务器控制台打出来的消息。

不过，这个功能是实现了。很有成就感。终于解开了心中这个结……

阅读全文

0 0