如何在POST方法之后使用javascript更改HTML内容

How to change HTML content with javascript after the POST method

本文关键字：javascript 更改 HTML 内容 之后 POST 方法      更新时间：2024-02-18

在用POST方法提交表单后，我很难用javascript更改HTML文档中的内容。我需要将HTML文档中div的颜色更改为黄色，我已经这样做了，但问题是，在它更改为黄色后，HTML网站在导航器中被刷新，然后恢复正常（白色）。它有点闪烁黄色，然后又变成白色。

这是我的HTML代码：

<form action="" method="post" onSubmit="return changeColor()">
.
.
.
<div id="divColor">
.
.

这是我更改div颜色的javascript代码：

function changeColor()
{
    var div = document.getElementById("courselist");
    div.style.backgroundColor='yellow';
}

我需要这样做，因为这是任务的一部分，所以我不能用CSS更改颜色，到目前为止我们只能使用HTML和javascript。这不是全部任务，以防有人认为我想作弊，这是我被卡住的部分。在导航器使用POST方法刷新HTML网站后，我无法使div保持黄色。

谢谢！

提交表单时，它会转到action=""中指定的下一页。因此，当您单击提交按钮时，它会更改颜色，然后加载下一页。由于缺少action=""中指定的页面，它正在重新加载同一页面，使其变为黄色，然后刷新。

这可能就是你想要的。您可以使用AJAX向POST提交信息，而无需实际加载不同的页面。

实现目标有三种方法。

  1. 使用ajax提交信息，这样页面就不会刷新，状态也会保持不变。或者，您可以像下面这样做，它具有与ajax相同的效果：

    <iframe name="myIfr"style="display:none"><iframe><form method="post"target="myIfr"><表单>

  2. 更改"的"action"，在url中记录状态，如下所示："mypage.php？status=1"，刷新页面后，可以从url中获取状态。

  3. 使用Cookie。我认为这不是一个好主意。

您可以将其分离，以便只有在满足其他条件时才能打印出表单。使用一个名为$output_form的变量（或者您想命名它的任何变量）并将其设置为false，然后在发送POST之前和发送POST之后分别打印代码。这是我不久前完成的一些代码的精简版本，可能会帮助你了解你能做什么：

<?php
if(isset($_POST['Submit'])){
{SOME CODE HERE}
        $output_form = true;
    }
}
else{
    $output_form = true;
}
if (!$output_form){
    {SOME CODE HERE}
}
else{
    {OTHER STUFF HERE}
    $output_form = true;
    mysqli_close($dbc);
}
}
if ($output_form){
?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
大家好，我终于解决了我的问题。我不得不在changeColor（）函数中返回false，网站会改变颜色，但不会刷新自己。我喜欢饼干的做法。

谢谢你的帮助，我不能使用AJAX或PHP，因为他们还没有教我们这些。

相关文章：