从 HTML 到不同服务器的持续 POST 请求答案

【问题标题】：Constant POST request to different server from HTML从 HTML 到不同服务器的持续 POST 请求
【发布时间】：2016-01-01 12:41:54
【问题描述】：

我想创建一个 HTML 页面，该页面提供一个按钮（链接、其他一些可点击元素等），当按下该按钮时，它会将特定的常量 POST 请求发送到特定的常量服务器。我需要发布的值是一个特定的 JSON 编码常量值 ({"key":"value"})，因此对于 HTTP，它只是一个非常短的常量字符串。

我必须使用的值和 URL 是常量。为了让事情发生，我必须准确地发送这个恒定的 POST 请求。无需参数化此请求或“设置值”或类似内容。另外，我没有 parameter 名称或类似名称。我不能发送带有值为 JSON 编码值的参数的参数列表，但我必须单独发送 JSON 编码值。完整的 POST 请求可能如下所示：

POST /post/path/to/action HTTP/1.1
Host: the.specific.server
Content-Type: application/x-www-form-urlencoded
Content-Length: 15

{"key":"value"}

(NOT parameter={"key":"value"} 或类似正文！)

服务器不在我的权限下，而是我想使用的服务。

使用纯 shell 意味着我可以使用 curl 非常简单地做到这一点：

curl http://the.specific.server/post/path/to/action -d '{"key":"value"}'

我想象过类似的东西

<button url="http://the.specific.server/post/path/to/action"
        value="{%22key%22:%22value%22}">visible text</button>

但我没有找到合适的。

基于this 或this 或this 之类的问题，我尝试了类似这样的各种方法：

<form method="POST" action="http://the.specific.server/post/path/to/action">
  <input type="text" id="key" key="value">value</input>
  <button type="submit" value="{%22key%22:%22value%22}">visible text</button>
</form>

有或没有输入字段、按钮、其他参数、其他值等，但最终在按下时没有向服务器发送任何有用的信息。充其量我得到的东西也在传输参数名称（因此有效负载不仅仅是 Json 编码的值）。

我想我只是缺少了一些基本的东西：-}

【问题讨论】：

HTMLButtonElement 上没有url 属性，您的问题有点不清楚：您如何设置值？你想如何传递你的价值观？你用什么来检索服务器上的那些？为了将<input> 作为 POST 发送到您的服务器，您必须为它们提供名称，所以这里没有发送任何内容。 HTMLInputElement 上也没有 key 属性。 how to POST from a webpage to a server 上的一些读数怎么样？
服务器不在我的权限下。为了让事情发生，我必须准确地发送这个恒定的 POST 请求，就是这样。它没有进一步参数化，因此无需“设置值”。我在我的问题中重复了这些方面，以进一步明确这一点。
但是这里你没有向服务器发送任何东西......
是的，也许是这样。我在网络编程方面没有那么熟练。但我想要向服务器发送一个 POST 请求。我怎样才能做到这一点？正如我所写，我的试验没有成功。顺便说一句，当我提到服务器时，我指的是the.specific.server。我不想与 HTML 页面来自的服务器通信。实际上，就我而言，这是通过file:// 访问的本地文件。
猜测您通过 js 获取 JSON 值，您可以使用 JSON 内容设置隐藏输入：var jsonString = "{%22key%22:%22value%22}"; var obj = JSON.parse(decodeURIComponent(jsonString)); var hid = document.querySelector('input[type="hidden"]'); hid.name = Object.keys(obj)[0]; hid.value = obj[hid.name]; 和 HTML
yourServer/yourfile.php"><input type="隐藏"/>

标签： html json forms rest post

【解决方案1】：

HTML 中无法从表单生成 JSON。您需要在此处使用 AJAX 请求来实现这一点。

使用 jQuery 可能是这样的：

$.ajax({
  type: 'POST',
  url: 'http://the.specific.server/post/path/to/action',
  data: '{"key":"value"}',
  success: function() {
    // Successful response received here
  },
  dataType: 'json',
  contentType : 'application/json'
});

这将在点击按钮或链接时触发，如下所述：

$('#myButtonId').click(function() {
  $.ajax({
    (...)
  });
});

在包含 jQuery 库后，可以将其放在页面中的 script 中，如下所述：

<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
      // Waiting for the DOM to be loaded
      $(document).ready(function() {
        $('#myButtonId').click(function() {
          // When button is clicked
          $.ajax({
            (...)
          });
        });
      });
    </script>
    <body>
      <button id="myButtonId">CLICK ME</button>
    </body>
  </head>

已编辑

以下是使用原始 JavaScript API 发送 HTTP 请求的方法：http://www.quirksmode.org/js/xmlhttp.html。

我修改了此代码以适用于您的用例：

function sendRequest(url, callback, postData, contentType) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData) {
        if (contentType) {
            req.setRequestHeader('Content-type', contentType);
        } else {
            req.setRequestHeader('Content-type',
                  'application/x-www-form-urlencoded');
        }
    }
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        } catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}

要执行您的请求，只需使用函数sendRequest：

sendRequest(
  'http://the.specific.server/post/path/to/action',
  function() {
    // called when the response is received from server
  },
  '{"key":"value"}',
  'application/json');

希望对你有帮助蒂埃里

【讨论】：

从纯 HTML 的角度来看，该代码应该放在哪里？在<script> 标签内？那么 HTML 方面是什么？ <button id="#myButtonId">CLICK ME</button>?我是否必须导入任何内容或加载某些内容或其他内容才能执行 Ajax 内容，或者我可以在没有准备的情况下执行此操作吗？这会在所有浏览器上运行吗？
顺便说一句，因为它是常量，我不需要生成 JSON（我想我现在已经写了一百次了）。我只想发布一个常量字符串（恰好是一个 JSON 编码的值），而不是作为参数列表的一部分。
谢谢，这更接近我想要的。我觉得导入一个像 jQuery 这样的外部库对于我的简单任务来说可能是多余的（然后我更喜欢我也不喜欢的 CGI 解决方案）。我的主要反对意见是我可能无法访问 Internet，因此可能无法使用此解决方案，对吗？
问题是你不能只从 HTML 表单生成 JSON，即使是常量字段也是如此。提交仅支持 HTML 的表单时，内容将使用 application/x-www-form-urlencoded 或 multipart/form-data 而不是 application/json 进行编码。详情请参阅规范：w3.org/TR/html401/interact/forms.html#form-content-type.
您可以下载该库并将其放在您的 HTML 文件旁边。当然，您可以使用浏览器的原始 XHR API，但它可以依赖于浏览器;-) 并且使用 jQuery 支持更容易使用。 CGI 是一种服务器端方法。我们在这里处理浏览器中的客户端...

【解决方案2】：

一个基于https://gist.github.com/Xeoncross/7663273的简单、可定制且无依赖的解决方案
可在 IE 5.5+、Firefox、Opera、Chrome、Safari 上运行。

<html>
    <body>
          <button id="myButtonId" onclick='post("http://the.specific.server/post/path/to/action", "{\"key\":\"value\"}");'>CLICK ME</button>
    </body>

    <script>
        function post(url, data, callback) {
            try {
                var req = new(this.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
                req.open('POST', url, 1);
                req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                req.send(data)
            } catch (e) {
                window.console && console.log(e);
            }       
        }
    </script>
</html>

【讨论】：

我会尽快尝试并希望它有效！（对我来说，在我的环境中等）顺便说一句，在 Android 浏览器上工作将是完美的，因为这意味着将模拟的远程控制按键发送到我的电视机，这对于移动设备来说最有意义。
您应该在上面的代码中将application/x-www-form-urlencoded 替换为application/json，因为您实际上发送的是JSON 内容;-)
你是对的。但我听说“application/json”有时会给出随机行为，而其他一些人则使用“text/plain”。所以我不知道该怎么想:-)
哇...听起来有点疯狂。我们无法用这样的规则建立一个可行的万维网。
真的很奇怪，确实 ;-) 这就是为什么我不喜欢直接使用低级 API 来处理 AJAX 请求，而是让更多高级 API/库来处理这种奇怪的浏览器特定行为！我想说的是，如果你发送 JSON 内容，你应该使用内容类型application/json...

【解决方案3】：

您正在寻找能够以 json 格式传输表单数据的 FORM 编码算法。

看看W3C HTML JSON form submission。它不活跃，也不太可能维持。

因此，您最好使用上述 JS 或 Jquery 解决方案或使用服务器端转发。我的建议是使用 jquery，因为这些天大多数网站都指向 google cdn，而 jquery 主要是浏览器缓存的。使用下面的代码，您可以巧妙地触发 POST 请求，而无需担心底层浏览器变体。

$.ajax({
  type: 'POST',
  url: 'http://the.specific.server/post/path/to/action',
  data: '{"key":"value"}',
  success: function() {
    // Successful response received here
  },
  dataType: 'json',
  contentType : 'application/json'
});

【讨论】：

【解决方案4】：

使用 JQuery 方法和 Ajax 试试这个建议：

$(document).ready(function(){
    $("#myForm").submit(function(){
        $.ajax({type:"POST", 
                data: $(this).serializeObject(),
                url:"http://the.specific.server/post/path/to/action",
                contentType: "application/json; charset=UTF-8",
            success: function(data){
                // ... OK
            },
            error: function(){
                // ... An error occured
            }
        });
        return false;
    });
});

注意： serializeObject 方法将表单元素转换为 JSON 字符串。

【讨论】：

【解决方案5】：

我现在寻求一个简单的解决方案（因为这就是我想要的）我通过寻找更多答案找到了自己。似乎没有办法使用 JS 来完成这项任务。

<button onClick="postCommand('mypath', 'mykey', 'myvalue')">Click</button>
<script>
  function postCommand(path, key, value) {
    var client = new XMLHttpRequest();
    var url = "http://the.specific.server/" + path;
    client.open("POST", url, true);
    client.send("{\"" + key + "\":\"" + value + "\"}");
  }
</script>

这通常是@aprovent 的回答，所以我接受了他并授予他赏金。

【讨论】：