Question

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function test(){
 var name = document.getElementById('name').value;
 var snumber = document.getElementById('snumber').value;
 document.write("<h2>name="+name+"");
 document.write("&snumber="+snumber+"</h2><br />");
}
</script>
</head>
<body>
<form method = "post">
<h2>Example of sending data using POST</h2>
Name :
<input type="text" id="name"><br/>
Student number:
<input type="text" id="snumber"><br/><br/>
<input type="button" value="submit" onclick="test();">
</body>
</html>

我写了一个HTML代码，我必须使用HTML post方法发送有关名称和数字的数据！当我发送这些数据时，我可以正常看到，但我无法在我的linux上看到POST消息。当我使用get方法时，我可以像这样在linux中看到GET消息。

GET message

我的代码不是POST方法吗？或者如何在不改变任何输出的情况下将其更改为POST方法？

非常感谢你的关注。!!

Answer 1

虽然method属性表示请求是GET还是POST，但表单通常还需要action属性才能提交。 action属性只能在HTML5 <!DOCTYPE>中省略，其中表单也可以提交到同一页面。

您的表单因以下几个原因而崩溃：

因为您错过了结束</form>代码，导致HTML无效
您的输入缺少name属性，因此他们的数据无法通过
您没有类型为submit

表单通常会以<input type='submit'>提交。而不是这样，您试图将自定义submit按钮挂钩到JavaScript函数。 <input type='submit'>为您自动创建按钮，可以使用CSS选择器input[type=submit]设置样式。

请注意，虽然您的JavaScript完全没必要，但document.write()为vulnerable to XSS injection，并且绝对应该不。

我已更正了您遗失的</form>代码，添加了缺失的name属性，并将缺少的表单提交添加到以下示例中：

<!DOCTYPE html>
<html>
  <form action="target.php" method="post">
    <h2>Example of sending data using POST</h2>
    Name :
    <input type="text" id="name" name="name"><br/> Student number:
    <input type="text" id="snumber" name="snumber"><br/><br/>
    <input type="submit">
  </form>
</html>

数据将通过POST提交到表单action中指定的位置。在我的例子中，那是target.php。如果您希望表单发布到本身，则可以使用action="#"，或者只是在您使用HTML5时省略action属性。

显然，您可以将表单指向任何后端脚本。假设您使用PHP，在文件target.php中，您可以输出数据：

echo $_POST['name'] . "<br />" . PHP_EOL;
echo $_POST['snumber'] . PHP_EOL;

有关表单的更多信息，请查看MSDN的基础知识。

希望这有帮助！：）

HTML POST方法更正

1 个答案: