时间戳

首页 > 解决方案 > 如何使用简单的 HTML 表单将指标发布到 InfluxDB？

html - 如何使用简单的 HTML 表单将指标发布到 InfluxDB？

问题描述

我正在尝试通过来自 HTML 表单的 POST 请求将 a0或 a发送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>

curl发送 a的命令1 如下：

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

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

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

如果您仔细查看字符串的末尾，您会看到\r明显添加了 a 并且我怀疑这会破坏数字解析（我前段时间有类似的东西），但至少这似乎试图评估该行全部。但是，我还没有找到删除或避免\r. 有人知道如何实现这一目标吗？

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

编辑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

带标题：

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

我总结：

编辑 2：我发现了如何从调用中显示请求标头curl。命令是：

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

我总结：

标签： htmlformspostline-breaksinfluxdb

解决方案

最后，我找到了一个有效的 JavaScript 解决方案。这个 Mozilla 文档页面是没有密钥的 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>

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

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

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

但是请注意，仍然不能保证检测到每个错误。我试图将一个字符串插入一个整数字段，但失败了，但我仍然收到“成功”警报。我稍后会对此进行调查。

所以总的来说，我认为这个问题已经充分解决了我的目的，我希望这可以帮助任何偶然发现它的人。

推荐阅读