我想创建一个 HTML 页面，它提供一个按钮(链接、其他一些可点击的元素等)，当按下该按钮时，它会向特定的常量服务器发送特定的常量 POST 请求。我需要发布的值是一个特定的常量 JSON 编码值 ({"key":"value"})，因此对于 HTTP 它只是一个非常短的常量字符串。
我必须使用的值和 URL 常量。为了让事情发生，我必须准确地发送这个常量 POST 请求。无需参数化此请求或“设置值”或类似内容。此外，我没有参数 名称或类似名称。我不能发送带有值为 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"}
(不是 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 编码的值)。
我想我只是遗漏了一些基本的东西 :-}
最佳答案
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 - 从 HTML 到不同服务器的持续 POST 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32938766/