Question

我的代码执行顺序有很大的问题。

HTML示例：

<div id="toast-container" class="toast-top-right"><div  id="toast-type" class="toast" aria-live="assertive" style=""><div id="snackbar">message</div></div></div>
.
.<!--Somewhere more down the line-->
.
.    
    <div class="col_half col_last">
        <label for="job-ctc-frm-heard-about">How did you find out about us?</label>
        <input type="text" id="job-ctc-frm-heard-about" name="job-ctc-frm-heard-about" value="<?php echo $discovered;?>" class="sm-form-control" />
    </div>

JavaScript函数：

 <script> 
  function Toast(message, messagetype) 
  {
     var cont = document.getElementById("toast-container");
     cont.classList.add("show");
     var type = document.getElementById("toast-type");
     type.className += " " + messagetype;
     var x = document.getElementById("snackbar");
         x.innerHTML = message;
     setTimeout(function(){ cont.classList.remove("show")}, 3000);
  }
</script>

PHP示例：

<?php
$discovered ="";

if($_SERVER["REQUEST_METHOD"]=="POST")
    {       
        $message = 'Let the games begin';
        echo "<script type='text/javascript'>Toast('$message', '$Success');</script>";

$discovered = test_input( $_POST["job-ctc-frm-heard-about"] );
......
?>

现在这是我的问题。我的PHP使用功能Toast。我的函数Toast访问HTML div Toast容器以设置消息。另一个div使用php变量$ discovered来记住表单提交失败时输入的值。如果我将JS放置在DOM之前的任何位置，则var cont将为null，因此它必须在下面。

但是，如果我将代码顺序定位为PHP-> HTML-> JS，则该函数在PHP中未定义，因此必须在JS之后。但是，如果我将其定位为HTML-> JS-> PHP，则$ discovered变量将不会显示在HTML中。订单彼此冲突。有什么解决办法吗？

Answer 1

最简单的方法是将相关零件移到您需要的地方。您需要$discovered在整个文件中可用（当PHP在服务器端执行时），并且您需要它在Toast声明之后专门回显脚本：

<?php
$discovered ="";

if($_SERVER["REQUEST_METHOD"]=="POST") {       
    $message = 'Let the games begin';    
    $discovered = test_input( $_POST["job-ctc-frm-heard-about"] );
    // ...
}
?>


<!-- HTML referencing $discovered here -->


<script> 
    function Toast(message, messagetype) 
    {
        var cont = document.getElementById("toast-container");
        cont.classList.add("show");
        var type = document.getElementById("toast-type");
        type.className += " " + messagetype;
        var x = document.getElementById("snackbar");
            x.innerHTML = message;
        setTimeout(function(){ cont.classList.remove("show")}, 3000);
    }
</script>
<?php
    if($_SERVER["REQUEST_METHOD"]=="POST") {
        echo "<script type='text/javascript'>Toast('$message', '$Success');</script>";
    }    
?>

如果要从客户端控制这些内容，则可以json_encode您的PHP对象，这意味着它们将以纯文本格式发送，就像您已将它们硬编码到文件中一样。如@FZs所述，PHP在服务器上运行，并通过执行所有<?php ... ?>块来“准备”文件。当结果到达浏览器时，它包含结果文本而不是PHP（浏览器不理解PHP）。

PHP，HTML，JS执行顺序冲突

1 个答案: