Javascript POSTing HTML表单
[英]Javascript POSTing HTML form
问题描述
I need to post some data to a webservice using a single button click. 
我需要使用单击按钮将一些数据发布到Web服务。 I don't want to show the reply received from the server, which a simple HTML form does. 我不想显示从服务器收到的回复，这是一个简单的HTML表单。 So I came up with the following code: 所以我想出了以下代码：
<!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>
Please enlighten me what exactly is going wrong, because its not posting any data. 请告诉我究竟出了什么问题，因为它没有发布任何数据。
6 个解决方案
解决方案1
0 2015-12-17 05:05:03
Any reason you have to use JavaScript to create the form? 你有什么理由使用JavaScript来创建表单吗？ Is it simply not posting the input or is the form failing to submit? 它只是不发布输入或表单无法提交？ You can always use your Web Inspect tool to see the request. 您始终可以使用Web Inspect工具查看请求。
Try opening your web inspector and look at the console for any JavaScript errors. 尝试打开Web检查器，查看控制台是否存在任何JavaScript错误。
解决方案2
0 2015-12-17 05:21:39
your posted data found at http://www.posttestserver.com/data/2015/12/16/21.17.23451563624 您发布的数据位于http://www.posttestserver.com/data/2015/12/16/21.17.23451563624
plz, see the image. plz，看图像。
解决方案3
0 2015-12-17 06:06:48
you can use ajax to post data instead of form submit. 您可以使用ajax发布数据而不是表单提交。 params = { 'input':'on' } $.ajax(url,post,params,succ,err) params = {'input'：'on'} $ .ajax（url，post，params，succ，err）
解决方案4
0 2015-12-17 06:42:09
Solutions as per my understanding : 根据我的理解解决方案：
If you are placing script in head tag, refer ' Where should I put <script> tags in HTML markup?
如果要将脚本放在head标记中，请参阅“ 我应该在哪里放置<script>标记到HTML标记中？ '. ”。 The conclusion is to put scripts in the head tag and use the async or defer attributes . 结论是将脚本放在head标记中并使用async或defer属性 。 Append form to your body before submitting the form.
在提交表单之前将表格附加到您的身体。 document.body.appendChild(form);Place script before body tag.
在body标签前放置脚本。
解决方案5
0 2015-12-17 07:42:24
Not sure why you want to create a form using JS just to post some data to server when you could have used ajax. 不知道为什么要使用JS创建表单只是为了在使用ajax时将一些数据发布到服务器。 As already mentioned in previous answers you can use jQuery. 如前面的答案中已经提到的，您可以使用jQuery。 If you are reluctant to use jQuery, you could have used XML HTTP Request (XHR) object 如果您不愿意使用jQuery，则可以使用XML HTTP Request（XHR）对象
A simple solution using jQuery would be 使用jQuery的简单解决方案是
$.ajax({
type: 'POST',
url: 'https://posttestserver.com/post.php',
data: {'args': 'on'}
});
Since you want the data to send on clicking a button, you could trigger the event on button click 由于您希望在单击按钮时发送数据，因此可以在按钮单击时触发事件
$('button').on('click', function() {
$.ajax({
type: 'POST',
url: 'https://posttestserver.com/post.php',
data: {'args': 'on'}
});
});
解决方案6
0 已采纳 2015-12-21 11:51:49
My main aim was 我的主要目标是
I don't want to show the reply received from the server
So I added an IFRAME in the page and then added it as the form's target 所以我在页面中添加了一个IFRAME，然后将其添加为表单的目标
<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>
Now the reply from server is not visible 现在服务器的回复不可见
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.