Question

我有一个带有一个输入文本字段的基本HTML表单，以及一个提交按钮。现在，我希望使用JavaScript在表单提交后显示用户在文本字段中输入的内容。

这是我的表格代码：

<form method = "POST">
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit" onclick = "postResul()" />
</form>

单击提交按钮时，将调用postResul()函数：

<script>

function postResul()
{
    var htmlString="<?php echo $_POST['tweet1']; ?>";
    alert(htmlString);
}

</script>

现在，这两个代码片段都存储在PHP文件中。但是，在提交表单时，输入表单字段中输入的数据不会显示。我显示$_POST['tweet1']变量以显示用户提交的条目。

这里看起来有什么问题？我是否以错误的方式在PHP中使用$_POST变量？

Answer 1

如果要在将输入值发送到服务器之前显示输入值：

document.querySelector("form").addEventListener("submit", function()
{
    var value = this.querySelector("input[name='tweet1']").value;
    alert(value);
    return false; //disable sending the data to the server
}, false);

    <form id="myForm" method="post" action="index.php">
       <input type="text" name="tweet1" />
       <br>
       <input type="submit" />
    </form>

如果要在将输入发送到服务器后显示输入值：

<form method="post" action="index.php">
   <input type="text" name="tweet1" />
   <br>
   <input type="submit" />
</form>

<?php echo htmlspecialchars($_POST["tweet1"]); ?>

这些是不同的东西。只有在将一些数据发送到服务器后才能使用$_POST。在浏览器中打开yoursite.com/index.php时，会发出HTTP GET请求。在这种情况下，$_POST将是一个空数组，因为它是一个GET请求，没有数据发送到服务器。提交表单时，您发出HTTP POST请求。您的PHP只能访问您发送到服务器的数据。使用Javascript，您可以访问访问者的计算机，而不是服务器上。唯一一种将数据发送到服务器而不刷新页面的方法，如果你使用AJAX，并发出一个新的HTTP POST请求，它将在“后台”运行。但是，如果您只想显示输入值，并且不想将其保存在服务器上，则不需要这样做。这可以使用Javascript完成，而无需PHP。

您在上面发布的代码的工作原理如下：

您向yoursite.com/index.php发送HTTP GET请求。
没有数据发送到服务器，$_POST将为空。
var htmlString="<?php echo $_POST['tweet1']; ?>";在此行中，您尝试回显$_POST的不存在成员，如果未禁用display_errors，您可能会看到错误。
您点击了提交按钮。
它有一个onclick属性，postResul（一个Javascript函数）被调用。如果你打开页面的源代码，你会看到：
```
function postResul()
{
    var htmlString="";
    alert(htmlString);
}
```
显示空弹出窗口后，按OK键，浏览器会将数据发送到您的服务器，您将能够通过$_POST访问输入值。
如果再次按下提交按钮，您将看到提交的值（而不是输入的实际值），因为如果您打开源代码，您会看到：
```
function postResul()
{
    var htmlString="entered data";
    alert(htmlString);
}
```

但这不是您想要的，所以请根据您的需要查看上面的示例（保存数据，或者只是在浏览器中显示）。

Answer 2

这应该有效：

function postResul()
{
    var htmlString=document.getElementsByName("tweet1")[0].value;
    alert(htmlString);
}

但是你应该更多地了解客户端语言和服务器端语言的工作原理。

Answer 3

在调用Javascript函数时，不能使用$_POST['tweet1']来获取值。基本上客户端和服务器端完全不同。

您可以使用Javascript获取结果：

function postResul()
{
    var htmlString= document.getElementsByName("tweet1")[0].value;
    alert(htmlString);
}

在HTML中：

<form method = "POST">
   <input type = "text" name = "tweet1"/>
   <br>
   <input type = "submit" onclick = "postResul()" />

</form>

注意：上述功能在客户端运行，而不是在服务器端运行。

$_POST可用于在php页面中获取提交表单的值。

干杯。

Answer 4

您必须制作另一个文件。将您的代码更改为：

<form method="POST" action="another.php" >
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit"  />
</form>

在文件another.php中，您可以显示变量：

<?php echo htmlspecialchars($_POST['tweet1'], ENT_QUOTES, 'UTF-8'); ?>

Answer 5

您应该以不同的方式使用表单

<form method="POST">
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit" />
</form>

test.php文件

<?php
return json_encode([1, 2, 3]);

JS

$('form').on('submit', function() {
   $.post('test.php', {}).done(function(response) {
      alert(response);
   })
})

像这样的东西。希望它有用。

Answer 6

如果您使用的是jquery库，则可以执行此操作

<form method="POST">
   <input type = "text" name = "tweet1" class="tweet" />
   <br>
   <input type = "submit" class="submit" />
</form>

$('.submit').click(function(e){
    alert($('.tweet').val());
    e.preventDefault();
});

jsfiddel工作示例http://jsfiddle.net/mdamia/j3w4af2w/2/

PHP：使用$ _POST显示表单值

6 个答案: