JavaScript提交HTML表单

Question

JavaScript提交HTML表单

3

我需要通过单击一个按钮将一些数据发布到webservice。我不想显示来自服务器的响应，而这是一个简单的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>

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

- Dushyant Bangal

2

它在这里运行：https://jsfiddle.net/6Ldp26d4/ 将您的JS函数放在关闭</body>标签之前并尝试... - Rayon

那段代码在Chrome中运行良好。这是你所有的代码吗？ - Adrian Lynch

6个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chandni · Answer 1

根据我的理解，解决方案如下：

如果您将脚本放置在 head 标签中，请参考“在 HTML 标记中应该把 <script> 标记放在哪里？”。结论是将脚本放在 head 标签中并使用 async 或 defer 属性。
提交表单前将其附加到 body 中。
```
document.body.appendChild(form);     
```
将脚本放在 body 标签前。

- aliasm2k · Answer 2

不确定为什么你想使用JS创建表单只是为了向服务器发送一些数据，而你本可以使用ajax。正如之前的回答中已经提到的，你可以使用jQuery。如果你不愿意使用jQuery，你也可以使用XML HTTP请求（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'}
    });
});

- Dushyant Bangal · Answer 3

我的主要目的是

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

因此，我在页面中添加了一个IFRAME，然后将其作为表单的目标添加。

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

现在服务器的回复不可见

- dranieri · Answer 4

你使用JavaScript创建表单的原因是什么？它只是没有发布输入还是表单无法提交？您可以始终使用Web检查工具查看请求。

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

- Ataur Rahman Munna · Answer 5

您发布的数据可以在以下链接中找到： http://www.posttestserver.com/data/2015/12/16/21.17.23451563624

请查看图片。

- Jiayu Wang · Answer 6

你可以使用Ajax来提交数据，而不是使用表单提交。参数 = { 'input':'on' } $.ajax(url,post,参数,succ,err)