Javascript 发布 HTML 表单
Javascript POSTing HTML form
我需要通过单击按钮将一些数据post 发送到网络服务。
我不想显示从服务器收到的回复,这是一个简单的 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>
请告诉我到底出了什么问题,因为它 post 没有任何数据。
您必须使用 JavaScript 创建表单的原因是什么?是根本没有发布输入还是表单提交失败?您始终可以使用 Web 检查工具来查看请求。
尝试打开您的网络检查器并查看控制台是否有任何 JavaScript 错误。
您发布的数据位于
http://www.posttestserver.com/data/2015/12/16/21.17.23451563624
请看图片。
您可以使用 ajax 到 post 数据而不是表单提交。
参数 = {
'input':'on'
}
$.ajax(url,post,params,succ,err)
根据我的理解解决方案:
如果您将脚本放在 head 标记中,请参考“Where should I put <script> tags in HTML markup?”。结论是 将脚本放在 head 标签中并使用 async 或 defer 属性。
在提交表单之前将表单附加到正文中。
document.body.appendChild(form);
将脚本放在 body 标签之前。
不确定为什么要使用 JS 创建表单只是为了 post 一些数据到服务器,而您本可以使用 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'}
});
});
我的主要目标是
I don't want to show the reply received from the server
所以我在页面中添加了一个 IFRAME,然后将其添加为表单的目标
<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>
现在服务器回复不可见
我需要通过单击按钮将一些数据post 发送到网络服务。 我不想显示从服务器收到的回复,这是一个简单的 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>
请告诉我到底出了什么问题,因为它 post 没有任何数据。
您必须使用 JavaScript 创建表单的原因是什么?是根本没有发布输入还是表单提交失败?您始终可以使用 Web 检查工具来查看请求。
尝试打开您的网络检查器并查看控制台是否有任何 JavaScript 错误。
您发布的数据位于 http://www.posttestserver.com/data/2015/12/16/21.17.23451563624
请看图片。
您可以使用 ajax 到 post 数据而不是表单提交。 参数 = { 'input':'on' } $.ajax(url,post,params,succ,err)
根据我的理解解决方案:
如果您将脚本放在 head 标记中,请参考“Where should I put <script> tags in HTML markup?”。结论是 将脚本放在 head 标签中并使用 async 或 defer 属性。
在提交表单之前将表单附加到正文中。
document.body.appendChild(form);
将脚本放在 body 标签之前。
不确定为什么要使用 JS 创建表单只是为了 post 一些数据到服务器,而您本可以使用 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'}
});
});
我的主要目标是
I don't want to show the reply received from the server
所以我在页面中添加了一个 IFRAME,然后将其添加为表单的目标
<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>
现在服务器回复不可见