如何使用简单的 HTML 表单将 post 指标发送到 InfluxDB？

Question

我正在尝试通过来自 HTML 表单的 POST 请求将 0 或 1 发送到我的 InfluxDB 实例中的数据库。我已经通过 curl 成功地完成了很多次，但我无法使用简单的 HTML 表单。考虑这个 HTML 代码：

<!doctype html>
<!-- this file is called like http://my.influx.server/my_page_name.html -->
<html>
  <head>
    <title>my simple html/influx sender</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <form action="http://my.influx.server:8086/write?db=db_name" method="post" enctype="text/plain">
      <input name="data" type="hidden" value="my_measurement,tag_name=stuff value=1"/>
      <input type="submit" value="insert 1"/>
    </form>

    <form action="http://my.influx.server:8086/write?db=db_name" method="post" enctype="text/plain">
      <input name="data" type="hidden" value="my_measurement,tag_name=stuff value=0"/>
      <input type="submit" value="insert 0"/>
    </form>
  </body>
</html>

发送 1 的 curl 命令类似于：

curl -i -XPOST 'http://my.influx.server:8086/write?db=mydb' --data-binary 'my_measurement,tag_name=stuff value=1'

所以我尝试制作一个只有 2 个按钮的简单 HTML 表单。上面的代码是我至少可以尝试处理 "line interface" 语法的最接近的代码，但是我收到错误消息或只是没有响应，而且我的 InfluxDB 中什么也没有。上面代码的错误消息是：

unable to parse 'data=my_measurement,tag_name=stuff value=1\r': invalid number

如果你仔细查看字符串的末尾，你会看到一个 \r 显然被添加了，我怀疑这会破坏数字解析（我前段时间有类似的东西），但是在至少这似乎试图评估这条线。但是，我还没有找到删除或避免 \r 的方法。 有人知道如何实现吗？

此外，请考虑以下附加信息：

我想要它非常简单，只是一个小的 HTML 文件，可能有一些 JavaScript 代码，但我真的很想避免使用 PHP、jQuery 等等。另外，我正在努力适应 HTML5，您可能会注意到，但这不应该是问题所在。
在这种情况下，我不需要每次按键的时间戳，所以我没有传递时间戳，而是使用当前时间。这是通过省略时间戳来实现的，因此排除 \r 的字符串在语法上应该是正确的。
我也在寻找替代方案，但是只有使用 JSON 的想法，并且由于性能原因（我不希望在我的情况下），这似乎不再受支持。
curl命令使用了--data-binary参数，但我好像在HTML中没有这样的东西。我知道像 application/x-binary 这样的二进制 enctype，但它们不起作用，因为它们 URL-encode 字符串，这不会通过语法检查。我发现唯一的 enctype 至少工作得足够接近是 text/plain.
如果相应的 <input> 元素没有 name 属性，我也知道没有发送表单数据。然后我注意到 curl 字符串的构建方式类似于 my_measurement,tag_name=stuff value=1，可能是由 \n 分隔的多个这样的行，这与 POST key-value-pairs 中的不同39=]（即没有键，那将是 name 属性）。试图用 name="my_measurement,tag_name" 和 value="stuff value=1" （类似于原始字符串）来欺骗它没有成功，我仍然无法弄清楚哪个键是预期的。我尝试了 content、query 等，最后使用了 data。我保留了这个，因为在文档中他们谈论 "data" 和 none 的键有任何区别，只要提供一个。我怀疑 InfluxDB 只是使用第一个 POST 变量而忽略了名称，但我找不到关于此的任何明确声明。
我还尝试了几种不可见的 <input> 类型，例如 hidden 或按样式隐藏的常规文本框。这没有区别。可见元素也没有。
我也考虑过使用 AJAX，但是我找不到关于没有 key-value 内容的二进制 POSTs 的任何有用信息。我什至会处理一个只适用于 e 的页面。 G。对于现在的 Firefox，所以我不需要在不同的 AJAX object 创建算法等之间切换（是的，我知道，jQuery 有帮助，但请参阅上面的第一点）。

编辑 1：我试图用 curl:

重现错误

curl -i -XPOST 'http://my.influx.server:8086/write?db=home' --data-binary 'my_measurement,tag_name=stuff value=1\r'

这导致错误消息：

unable to parse 'my_measurement,tag_name=stuff value=1\r': invalid number

与 headers:

HTTP/1.1 400 Bad Request
Content-Type: application/json
Request-Id: ...
X-Influxdb-Build: OSS
X-Influxdb-Error: unable to parse 'my_measurement,tag_name=stuff value=1\r': invalid number
X-Influxdb-Version: 1.7.9
X-Request-Id: ...
Date: ...
Content-Length: 78

我得出结论：

\r 似乎在错误消息中编码不同（字符 \ 和 r 而不是实际的回车 return），但在 header它只是\r，但是它对解析错误没有影响，所以这是可比较的。
显然没有涉及键名，所以这和我上面的尝试还是有区别的。

编辑 2：我发现了如何通过对 curl 的调用显示请求 headers。命令是：

curl -v -XPOST 'http://my.influx.server:8086/write?db=db_name' --data-binary 'my_measurement,tag_name=stuff value=1'

命令输出的相关部分是：

> POST /write?db=db_name HTTP/1.1
> Host: my.influx.server:8086
> User-Agent: curl/7.58.0
> Accept: */*
> Content-Length: 37
> Content-Type: application/x-www-form-urlencoded
>
* upload completely sent off: 37 out of 37 bytes
< HTTP/1.1 204 No Content
< Content-Type: application/json
< Request-Id: ...
< X-Influxdb-Build: OSS
< X-Influxdb-Version: 1.7.9
< X-Request-Id: ...
< Date: Sat, 25 Jan 2020 10:54:11 GMT

我得出结论：

curl 和 --binary-data 调用的请求的内容类型是 application/x-www-form-urlencoded。
不幸的是，我无法看到实际的请求 body，所以我会用一些 URL-encoded 变体再试一次。但是，my_measurement,tag_name=stuff value=1 与请求 header 中一样是 37 个字符，因此我假设不涉及像 data 这样的键名。目前，我收到与发布此问题之前相同的错误消息：unable to parse 'data=my_measurement%2Ctag_name%3Dstuff+value%3D1': missing fields
\r没有了，但是没有键名我还是无法发送数据，而且由于URL-encoding导致整个字符串无效。 如何去掉URL-encoding?

Answer 1

最后，我找到了 JavaScript 有效的解决方案。 This Mozilla doc page 是没有键的 POST 表单的键。我的 HTML 页面现在看起来像这样：

<!doctype html>
<!-- this file is called like http://my.influx.server/my_page_name.html -->
<html>
  <head>
    <title>my simple html/influx sender</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <form id="form1">
      <button>insert 1</button>
    </form>

    <form id="form0">
      <button>insert 0</button>
    </form>

    <script>
        function sendData(value)
        {
            const str = "my_measurement,tag_name=stuff value=" + value;
            const xhr = new XMLHttpRequest();

            xhr.addEventListener("load", function(event) {
                alert("Success");
            });

            xhr.addEventListener("error", function(event) {
                alert("Error");
            });

            xhr.open("POST", "http://my.influx.server:8086/write?db=db_name");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.send(str);
        }

        const form0 = document.getElementById("form0");
        const form1 = document.getElementById("form1");

        form0.addEventListener("submit", function(event) {
            event.preventDefault();
            sendData(0);
        });
        form1.addEventListener("submit", function(event) {
            event.preventDefault();
            sendData(1);
        });
    </script>
  </body>
</html>

注意精简的表单定义：不再有 action、method 或 enctype，因为它们是通过 JavaScript 设置的。此外，没有常规的 submit 元素，而是一个常规按钮，但我不知道是否需要这样做。我稍后会调查。

主要部分在表单下方的脚本标签中。函数 sendData 为 POST 准备好的字符串准备一个 XMLHttpRequest 对象并调用它的 send 方法。该函数用在各个表单的submit事件中。此外，此函数还为成功和失败的请求注册事件处理程序。

sendData 函数下面的行标识表单并在其 submit 事件上注册事件侦听器。每个侦听器都阻止其表单以常规方式提交，而是调用适当的 sendData 调用，这将成功地将值插入 InfluxDB。

但请注意，仍然不能保证检测到每个错误。我试图将一个字符串插入一个整数字段，但失败了，但我仍然收到 "Success"-alert。我稍后会调查。

所以总的来说，我认为这个问题对于我的目的来说已经足够解决了，我希望这能帮助任何遇到这个问题的人。

Answer 2

这非常有用 post，我运行解决了 Sigfox 后端和回调的这个问题。

如果您在 URL 末尾放置一个 & 并使用内容类型 text/plain，那么 \r\n 问题就解决了。

如何使用简单的 HTML 表单将 post 指标发送到 InfluxDB？

How to post metrics to InfluxDB with a simple HTML form?

html

forms

post

line-breaks

influxdb