使用 Python 从 html 页面中提取 JSON 数据答案

【问题标题】：Extracting JSON data from a html page with Python使用 Python 从 html 页面中提取 JSON 数据
【发布时间】：2023-01-01 01:35:37
【问题描述】：

我对 html 和 JSON 相当陌生，并且在 Raspberry Pi 项目的 Python 中以可用格式提取我想要的数据时遇到了一些困难。

我正在使用一种设备，它以 html 页面的格式通过 wifi 链接输出一些实时数据。虽然页面上显示的数据可以更改，但我现在只关心从单个页面获取数据。在 Notepad++ 中查看时，页面如下所示：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><style>.b{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;background-color:#000;height:auto !important;}.f{border-radius: 10px;font-weight:bold;position:absolute;top:50%;left:0;right:0;margin:auto;background:#024d27;padding:50px;box-sizing:border-box;color:#FF0;margin:30px;box-shadow:0px 2px 18px -4px #0F0;transform:translateY(-50%);}#V{font-size:96px;}#U{font-size: 56px;}#N{font-size: 36px;}</style></head><body><div class="b"><div class="f"><span id="N">Voltage</span><br><span id="V">12.53</span>&nbsp;<span id="U">V</span><br></div></div><script>reqData();setInterval(reqData, 200);function reqData() {var xhr = new XMLHttpRequest();xhr.onload = function() {if (this.status == 200) {var data = JSON.parse(xhr.responseText);document.getElementById('N').innerHTML = data.n;document.getElementById('V').innerHTML = data.v;document.getElementById('U').innerHTML = data.u;} else {document.getElementById('N').innerHTML = "?";document.getElementById('V').innerHTML =  "?";document.getElementById('U').innerHTML = "?";}};xhr.open('GET', 'readVal', true);xhr.send();}</script></body></html>

如您所见，这是一个相当简单的页面，仅提供我试图提取的信息，显示在黑色背景上带有黄色文本的绿色框中。

通过稍微查看信息，我试图提取的信息是与跨度 ID =“V”（电压）、“N”（名称）和“U”（单位）相关联的信息。

数据实时显示在网页上（即每 200 毫秒更新一次（我认为）而不刷新页面），我想尽可能频繁地提取这些值。

我尝试了几个不同的代码块/方法，这似乎是我目前唯一能够获得成功的代码块：

import urllib.request, json, html

data = urllib.request.urlopen("http://192.168.4.1").read()

print (data)

这会正确返回页面的 html 源代码（尽管有大约 5 秒的延迟，这可能与我运行它的 Pi Zero 的低规格有关）。

但是，我似乎无法从中提取 JSON 数据。我试过了：

data_json = json.loads(data)

但这给了我一个 JSONDecodeError: expecting value: line 1 column 1 (char 0) 我假设这是因为“数据”仍然是 HTML 代码和 JSON 的混合。我还注意到我尝试检索的实际变量信息（顶部示例源页面中的电压、12.53 和 V）仅显示为“？”当我使用 urllib 打开页面而不是加载页面上显示的实际值时的占位符。

请问有人能给我任何指示吗？

提前致谢，史蒂夫

【问题讨论】：

标签： python html json

【解决方案1】：

正如您从错误消息和原始 HTML 代码中注意到的那样，您从设备获得的结果不是 json 数据，而是带有 javascript 的 html。看起来您发布的 HTML 向某个本地端点（/readVal 也许？）发出了 ajax 请求（javascript GET 请求）。

尝试在您的浏览器中打开http://192.168.4.1，打开开发工具，并观察页面在幕后发出的网络请求——具体来说，寻找一些 XHR 请求。查看请求 URL 和响应 - 我敢打赌您会找到一些返回您想要的原始 json 数据的本地端点。

或者试试http://192.168.4.1/readVal，看看是不是这样。

【讨论】：