Question

我正在使用带有POST方法的表单来应用会话，表单提交后，页面会重新加载，并且屏幕上不会显示任何警报。

所以我使用了一些我在网上找到的技巧，但是它有一个问题，提交表单后会弹出警报，但是页面设计均无效，这意味着我只有空白页面和警报消息。

单击“确定”以关闭警报消息后，页面就会加载。

if(empty($_SESSION["shopping_cart"])) {
    $_SESSION["shopping_cart"] = $cartArray;
    $status = "Product is added to your cart!";
    header('location:product.php?status=success');
}else{
    $array_keys = array_keys($_SESSION["shopping_cart"]);
    if(in_array($code,$array_keys)) {
        $status = "Product is already added to your cart!";
        header('location:product.php?status=failed');
    } else {
        $_SESSION["shopping_cart"] = array_merge($_SESSION["shopping_cart"],$cartArray);
        $status = "Product is added to your cart!";
        header('location:product.php?status=success');
    }

}

// This right here responsible to alert the message according to the status.
if( $_GET['status'] == 'success') {
   echo '<script>  alert("welldone");   </script>';
}
else{
   echo '<script>  alert("no good");   </script>';
}

我该如何解决页面加载顺序，以便页面首先加载而警报则第二次加载？

Answer 1

我对此有很多麻烦-即使使用标有“正确”的旧答案。

我找到了解决方法。在窗口加载和文档准备工作不起作用。但是，如果您使用以下脚本在页面底部添加图像，则在图像加载之前（页面加载结束时），图像将不会被调用。

这在我所有的测试中都有效。

<img id='workaround' src='https://picsum.photos/1/1'> <!-- any transparent 1x1 image would work -->
<script>
$("#workaround").on( "load", function(){
  alert("Image loaded.");
});
</script>

因此出于您的目的（或类似目的）

<img id='workaround' src='https://picsum.photos/1/1'>
<script>
$("#workaround").on( "load", function(){

<?php 
if( $_GET['status'] == 'success') {
   echo 'alert("welldone");';
}
else{
   echo 'alert("no good");';
}
?>
});
</script>

Answer 2

alert()在脚本被调用时停止脚本的执行和HTML页面的加载。您应该将此脚本移到页面底部。

Answer 3

@Yotam Dahan

请尝试使用此代码，以PHP提交表单后提醒消息。

<?
if ($_POST)
    {
    if (empty($_POST['testabc'])) $msg='<script type="text/javascript">alert("BLANK");</script>';
    else $msg='<script type="text/javascript">alert("NOT BLANK");</script>';
    }
?>
<html><head></head><body>
<table>
    <tr>
        <td>
            <form id="finfo" method=POST>
                <input type="text" name="testabc">
                <input type="submit" value="info">
            </form> 
        </td>
    </tr>
</table>
<script type="text/javascript">alert("auto");</script>
<? echo $msg; ?>
</body></html>

我希望以上代码对您有用。

谢谢。

Answer 4

经过长时间的研究，我找到了使用jQuery delay()函数延迟警报消息的解决方案，该延迟允许HTML页面加载然后执行警报。感谢所有帮助我获得这一结果的人。

  <script>
      $(document).ready(function(){
          setTimeout(function() {
              <?php
              if( $_GET['status'] == 'success') {
                  echo 'alert("welldone");';
              }
              else{
                  echo 'alert("no good");';
              }
              ?>
              }, 500);
      });
  </script>

Answer 5

您可以推迟脚本标记，直到页面呈现后，脚本标记才会加载。

<script src="alert.js" defer></script>

然后它将在页面呈现后加载，并且不会出现随机延迟（如使用wait / jquery延迟）。

Answer 6

引导程序模式也可能是一个更好的选择。模态看上去比警报对话框漂亮。它不会在消息显示期间更改当前页面布局。

在php代码中：

// This right here responsible to alert the message according to the status.
$message = '';
$show_modal = false;
if( $_GET['status'] == 'success') {
    $message = "Well Done";
    $show_modal = true;
}
else{
    $message = "No Good";
    $show_modal = true;
}

在html头标记中：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

然后在html中输入

：

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Alert!</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo ($message); ?></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

最后在js中显示带有条件的模态：

<?php if($show_modal):?>
    <script> $('#myModal').modal('show');</script>
<?php endif;?>

用PHP提交表单后的警报消息

6 个答案: