嵌入在静态 html 页面中的 HTTP POST 调用

Question

我想在 html 页面中嵌入一个返回 png 图像的 HTTP 调用。

如果有什么不同，我将在 github 的 gh-pages 上运行该页面。

网址是：http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png

请注意，有时 url 不会返回 png，因为服务有时会关闭。

我想使用 POST 方法调用该 url，然后简单地将 png 返回到页面中。理想情况下，http 调用也将在页面回收时运行。

我是否使用 iframe、表单、javascript？

谢谢！斯科特

Answer 1

[我还是好好回答吧]

当服务器向您提供图像数据并且您想要加载它时，您不妨将其视为图像并使用img 标签。在您的特定情况下，这种方法的问题是您说服务器有时可能会关闭，这意味着如果您只是附加图像而不首先检查损坏的链接，您将获得丑陋的损坏图像空间。

但是，使用图像的简单性仍然是可行的。通过使用带有加载事件处理程序的小 javascript，您可以附加图像当且仅当它成功加载。如果您从请求中获得任何类型的错误代码，则加载事件将永远不会触发，并且您不会附加损坏的图像。

这是 vanilla-js 中的概念：

img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";

你也可以在这里看到它的实际效果：http://jsfiddle.net/BwJeC/

Answer 2

您可以使用 XHR 从外部动态页面加载二进制数据并设置图像的内容。

This question, is very much similar Or this

Answer 3

我真的不明白你为什么要发帖。

无论如何，如果您想使用 POST 数据查询图片，可能需要执行 Js XHR 调用并将图像作为 base64 返回，然后执行以下操作：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />

最好仍然是一个简单的 get 调用：

<img src="/dynamicallyGeneratedPicture" />

使用返回图像类型文档的路由或脚本。