检索 POST 方法表单传递的值答案

【问题标题】：Retrieving values passed by POST method form检索 POST 方法表单传递的值
【发布时间】：2012-09-22 14:12:48
【问题描述】：

我在使用 POST 方法时遇到了一些问题 form 。我有一个带有 POST 方法的表单的页面 A ，当我提交表单时它转到页面 b 。

现在的问题是当我刷新它时弹出一个我不想来的警报。我正在使用 HTML 和 Javascript。

有没有办法处理这个刷新？

我能想到的一种方法是在页面 b 上动态创建一个隐藏表单，并在字段中填充值，并且每次刷新它只提交该隐藏表单。

请提出建议并让我知道是否还有其他巧妙的工作。提前致谢！基本上我在 AS400 平台上使用 CGIDEV2。因此，当提交页面 a 上的输入表单时，它会调用 abc.pgm 来写入页面 b。 Cgidev2 在部分中写入 html。它将写入 /TOP 部分，然后写入 /REFRESHFORM。这些值将被填充到 abc.pgm 中。

PAGE a
    /FORM
        <form name="input" action="abc.pgm" method="POST">
    Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
Page b 
    /TOP
    -----------------
    -------------- 
    /REFRESHFORM
    <form name="refreshinput" action="abc.pgm" method="POST">
    Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

【问题讨论】：

标签： javascript html forms post ibm-midrange

【解决方案1】：

您想避免“确认重新提交表单”提醒？通常的做法是使用POST/Redirect/GET 模式：页面 A 会将表单 POST 到服务器，服务器处理数据，然后向用户发出 3xx 重定向，触发对页面 B 的 GET 请求。因此随后重新加载页面 B 只是通常的练习，即没有警报消息。

【讨论】：

页面 b 上的 url 将是您在重定向中设置的任何内容。
好的，谢谢！请您给我一些链接，其中包含代码以供实施
好吧，这里所有的“魔法”都发生在服务器上，所以这将完全取决于您在服务器端使用的内容。由于对 CGIDEV2 不熟悉，我根本无法为您提供帮助，尽管我确信它是通过 Google 发布的。

【解决方案2】：

如果您对提交按钮使用点击事件处理程序，您只需要阻止点击时的默认操作。

$('#Submit').click(function(e){
  e.preventDefault();
  // submit the form using ajax
  // on success go to the page B
  ...
}

【讨论】：

实际上这些都是旧代码所以不能使用 AJAX ..必须用 javascript 来做到这一点
您应该遵循 Ultranaut 建议的 Post/Redirect/Get 模式，但无论如何最好的解决方案是使用 ajax。

【解决方案3】：

没有简单的方法可以避免此问题，但您可以尝试使用 XMLHttpRequest 对象而不是表单。您将需要编写一些 javascript 代码，但您的服务器代码将保持不变。

请参阅以下documentation 和example。

<!DOCTYPE html>
<html>
<head>
<script>
function Submit()
{
var form = document.getElementById("data-form");
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    form.innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","abc.pgm",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=" + form["userName"].value + "&userPass=" + form["userPass"].value);
}
</script>
</head>
<body>

<form id="data-form">
    Username: <input type="text" name="userName">
    Userpass: <input type="text" name="userPass">
    <input id="submit" onclick="Submit()" type="button" value="Submit">
</form>

</body>
</html>

【讨论】：

谢谢！所以现在如果 abc.pgm 指向 b 页，然后在 b 页按 F5 时，它会再次提交此表单？