首页html使用websocket接收python后端的json数据前端显示

html使用websocket接收python后端的json数据前端显示

时间: 2024-03-19 13:44:25 浏览: 266

在html中显示JSON数据的方法

背景：有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。解决方案：其实JSON.stringify本身就可以将JSON格式化，具体的用法是： JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing 如果想要效果更好看，还要加上格式化的代码和样式： js代码: function syntaxHighlight(json) { if (typeof json != 'string') { json =

您可以使用JavaScript的WebSocket API来在前端页面上接收Python后端的JSON数据，并将其显示在页面上。下面是一个简单的例子： 1. 编写HTML代码： ```html <!DOCTYPE html> <html> <head> <title>WebSocket Example</title> <script> var socket = new WebSocket("ws://localhost:8000/ws/"); socket.onopen = function(event) { console.log("WebSocket opened"); }; socket.onmessage = function(event) { var data = JSON.parse(event.data); console.log(data); // 在页面上显示数据 document.getElementById("data").innerHTML = data.message; }; socket.onerror = function(event) { console.log("WebSocket error"); }; socket.onclose = function(event) { console.log("WebSocket closed"); }; </script> </head> <body> <h1>WebSocket Example</h1> <div id="data"></div> </body> </html> ``` 上述代码中，使用`WebSocket`构造函数创建了一个WebSocket客户端，连接到后端的WebSocket服务器。设置了`onopen`、`onmessage`、`onerror`和`onclose`事件处理函数，分别表示WebSocket连接打开、收到消息、出错和关闭时的处理函数。其中，`onmessage`函数用于处理收到的JSON数据，将其解析为JavaScript对象。然后可以将数据显示在页面上，例如使用`document.getElementById`函数获取页面上的`div`元素，然后将数据赋值给`innerHTML`属性，以显示在页面上。在实际应用中，您需要修改WebSocket服务器的地址和端口以及页面中的元素ID，以适应您的需求。

阅读全文