Javascript POSTing HTML 表单答案

【问题标题】：Javascript POSTing HTML formJavascript POSTing HTML 表单
【发布时间】：2015-12-17 04:55:43
【问题描述】：

我需要使用单击按钮将一些数据发布到网络服务。我不想显示从服务器收到的回复，这是一个简单的 HTML 表单。所以我想出了以下代码：

<!DOCTYPE html>

<html>
<head>
<script>
function sendData() {

    var form = document.createElement('form');
    form.action = "https://posttestserver.com/post.php";
    form.method = 'POST';


    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = "args";
    input.value = "on";
    form.appendChild(input);

    form.submit();
    alert("Submited!");
}


</script>
</head>
<body>

<button onclick="sendData();">Click Me!</button>

</body>
</html>

请告诉我到底出了什么问题，因为它没有发布任何数据。

【问题讨论】：

它在这里工作：jsfiddle.net/6Ldp26d4 在关闭 </body> 标记之前放置你的 js 函数并尝试...
该代码在 Chrome 中运行良好。这就是你所有的代码吗？

标签： javascript html forms http-post

【解决方案1】：

您有什么理由必须使用 JavaScript 来创建表单？它只是没有发布输入还是表单无法提交？您始终可以使用 Web Inspect 工具查看请求。

尝试打开您的网络检查器并查看控制台是否有任何 JavaScript 错误。

【讨论】：

我使用了简单的 HTML 表单，它有效，但它显示了来自服务器的回复，我不想显示。替代方案？
嗯，如果服务器正在发送回复，这意味着您正在发布。我唯一能想到的是您发布到的 URL 正在寻找特别像令牌之类的东西。

【解决方案2】：

您发布的数据位于 http://www.posttestserver.com/data/2015/12/16/21.17.23451563624

请看图。

【讨论】：

也许不是我的，因为这个不工作:(

【解决方案3】：

您可以使用 ajax 来发布数据而不是表单提交。参数 = { '输入'：'开' } $.ajax(url,post,params,succ,err)

【讨论】：

浏览器可以根据隐藏属性过滤输入值。

【解决方案4】：

根据我的理解解决方案：

如果您将脚本放置在 head 标签中，请参考“Where should I put <script> tags in HTML markup?”。结论是将脚本放在 head 标签中，并使用 async 或 defer 属性。
在提交表单之前将表单附加到您的正文中。
```
document.body.appendChild(form);     
```
将脚本放在正文标记之前。

【讨论】：

【解决方案5】：

不知道为什么要使用 JS 创建表单只是为了将一些数据发布到服务器，而您本来可以使用 ajax。正如前面的答案中已经提到的，您可以使用 jQuery。如果您不愿意使用 jQuery，您可以使用 XML HTTP Request (XHR) 对象

使用 jQuery 的简单解决方案是

$.ajax({
    type: 'POST',
    url: 'https://posttestserver.com/post.php',
    data: {'args': 'on'}
});

由于您希望在单击按钮时发送数据，因此您可以在单击按钮时触发事件

$('button').on('click', function() {
    $.ajax({
        type: 'POST',
        url: 'https://posttestserver.com/post.php',
        data: {'args': 'on'}
    });
});

【讨论】：

【解决方案6】：

我的主要目标是

我不想显示从服务器收到的回复

所以我在页面中添加了一个 IFRAME，然后将其添加为表单的目标

<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>

现在服务器的回复不可见

【讨论】：