提交表单后如何自动刷新页面答案

【问题标题】：How to automatically refresh the page after submitting a form提交表单后如何自动刷新页面
【发布时间】：2015-06-17 08:13:47
【问题描述】：

我有一个 HTML 表单，当我单击“更新”时，更改不会反映，需要刷新才能看到更改。但是当我重新加载时，总是有Confirm Form Resubmission。

我使用了<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">，这意味着它在同一页面上提交。

【问题讨论】：

请附上您的 HTML 表单示例，以便我们查看您可能犯的任何错误
如果你需要简单的刷新，你可以使用 html 元刷新
htmlspecialchars 不应用于编码路径。用于编码输出。
这里没有理由使用：$_SERVER['PHP_SELF']。特别是使用 htmlspecialchars。只需将操作留空。这并不能回答提交表单后如何自动刷新页面的问题，但将操作留空将导致您尝试执行的操作完全相同（这是错误的）。

标签： php html forms

【解决方案1】：

您可以通过多种方式刷新页面：

方式：1

if(isset($_POST[submits])) {
    header("location:index.php"); // your current page
}

方式：2

if(isset($_POST['submit'])) {
    //Your SQL Query
    echo "<meta http-equiv='refresh' content='0'>";
}

方式：3（不推荐）

onsubmit="window.location.reload();" 似乎这不起作用。所以我在其中使用了超时功能。让它发挥作用。

onsubmit="setTimeout(function() { window.location.reload(); }, 5)"

方式：4

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

【讨论】：

我不知道应该把第一个代码块放在哪里
这在 10 月行不通。不过，这不是你的错，我决定完全放弃 PHP。
@siddharth 你可以使用超时功能。喜欢onsubmit="setTimeout(function(){window.location.reload();},5)"。根据您的需要增加时间，提交表单然后将其重新加载到页面。我已经更新了方法并添加了更多方法。

【解决方案2】：

因此，您所描述的主要问题是 url 请求方法是 POST。如果您在提交表单后刷新页面，浏览器将再次尝试 POST，就像您点击提交按钮一样。

这实际上是一种非常自然的提交数据的方式（到生成表单的 url）。大多数开源 CMS 会做同样的事情并具有相同的行为（wordpress、drupal）。

我构建了一个自定义系统，它执行相同的操作，但对刷新触发“您确定要再次提交此表单”而不是重新加载表单有一些抱怨。所以我用@Bruce 的解决方案解决了这个问题。在我输出任何内容之前，在我的页面底部，我重定向到当前 url。这会将浏览器中的前一页更改为 GET 而不是 POST，并防止重新提交警告。

至于您的数据未更新，您可能是在处理帖子之前构建表单。确保处理帖子是您执行的第一个操作。

我的系统与此示例代码有很大不同，所以不要指望它开箱即用。但它应该给你正确的想法。

<?php
if (isset($_SERVER["REQUEST_METHOD"]) && ($_SERVER["REQUEST_METHOD"] == "POST"))
{
  // Validate my form.
  if ($valid)
  { 
    // Save data on successful validation.

    // Redirect to prevent refresh from triggering another
    // form submission. Optional but helpful.
    redirect($_SERVER['REQUEST_URI']);
  }
  else
  {
    // Not valid no harm in just reloading as the user will be
    // fixing their errors and resubmitting anyway.

    // Generate error messages, etc.
  }
}

// Retrieve your form values here after you have fully processed the POST
// operation.
$values = getDBValues();    

function redirect($path)
{
   // The path should be validated somehow as the user
   // could alter parts of it such as query parameters.
   // For simplicity I'm leaving that part out.
   header('Location: ' . $path);
   die();
}

?>
<html>
<form>
...

【讨论】：

【解决方案3】：

我倾向于使用 AJAX 表单提交：

// Bind the submit action
$('#myForm').submit(mySubmitFunction);

// Submit handler
function mySubmitFunction(e) {
    e.preventDefault();

    var form = $(this);

    $.ajax({
            url: form.attr('action'),
            data: form.serialize()
    }).done(function(xhr) {
            // My endpoint returns JSON output
            var responseJSON = false;
            try {
                    responseJSON = $.parseJSON(xhr);
            } catch (error) {}

            if (responseJSON && responseJSON.hasOwnProperty('result') &&
                responseJSON.result) {
                    // The important bit
                    location.reload();
            } else {
                    // Handle error
            }
    });
}

我选择这个是为了能够向用户提供快速反馈。如果您不想使用 AJAX，在处理您的表单的 PHP 文件中添加一个简单的标头（'Location: yourPage.php'）就足够了。

【讨论】：

【解决方案4】：

您的页面在“更新”后已经重新加载，因为Confirm Form Resubmission 警报弹出。我想问题是在 php 脚本中你在处理新的 Post 数据之前显示数据。

【讨论】：