Question

我有一个页面，play.html：

    <form method="post" action="play.php">
         <input type="hidden" name="mp3name" value="/MP3/1.mp3">
         <input type="submit"  value="Play My MP# #1" />
    </form>


<form method="post" action="play.php">
    <input type="hidden" name="mp3name" value="/MP3/2.mp3">
    <input type="submit"  value="Play My MP# #2" />
</form>

这会调用另一个页面play.php：

<?php

$formurl = "play.html" ;
$playerurl = "player.html" ;

$mymp3 = $_GET["mp3name"]; 

header( "Location: $playerurl?mp3name=$mymp3" );
exit ;
?>

然后它调用另一个页面player.html：

<audio id="player" src="$mymp3" autoplay preload="auto"> </audio>
       <div>
       <button onclick="document.getElementById('player').play()">Play</button>
       <button onclick="document.getElementById('player').pause()">Pause</button>
       <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
       <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
          </div>

如何将变量从PHP传递到player.html？

Answer 1

当您使用$mymp3时，您正在使用$_GET获取变量<form method='post'..，将其更改为$mymp3 = $_POST['mp3name'];

然后，将您的player.html扩展名更改为player.php，以便在其上使用PHP代码。

所以，当你有了你的player.php文件时，请改变它......

<audio id="player" src="$mymp3" autoplay preload="auto"> </audio>

到此......

<audio id="player" src="<?php echo $mymp3 ?>" autoplay preload="auto"> </audio>

Answer 2

如果它只是一个普通的HTML文件，你就不能这样做。将其更改为PHP文件并使用<?= $_GET['mymp3'] ?>。在play.php中，由于您通过POST传递mp3name，因此您还需要$_POST而不是$_GET。

如果你没有使用PHP 5.4，那么推荐使用<?php echo $_GET['mymp3']; ?>（感谢@Palladium）。

Answer 3

可能最简单的方法（至少从问题中得到的信息）是摆脱从play.html到player.html的重定向并从前者发出播放器而不是拥有它是一个静态的HTML页面。所以play.html看起来像这样：

$formurl = "play.html" ;
$playerurl = "player.html";

$mymp3 = $_GET["mp3name"];

<audio id="player" src="<?php echo $mymp3; ?>" autoplay preload="auto"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>

或者是否有特殊原因需要通过重定向来实现？如果它必须是一个重定向，那么它是一个HTML页面的事实限制了你的选择，因为它不会有服务器端处理。您可以尝试在查询字符串中传递值：

header("Location: $playerurl?mp3name=$mymp3");

但是在没有服务器端处理的情况下，你会遇到查询字符串读取的问题。不过，您可以do this with JavaScript。您必须阅读该值并在src元素上设置audio属性。但是，通过服务器端处理，这可能更容易，更可靠。

Answer 4

这可以使用AJAX来实现（，因此您不必将html页面的扩展名更改为 .php ）。

步骤（i）-   在您的html页面中启动ajax调用，只有两点需要记住。   首先，在html页面中，提及页面的 URL （在此处需要提及您要从中接收变量的.php页面的位置），   其次，将 data 属性留空。

步骤（ii）-   现在，在您的.php页面中，在回显变量之前执行JSON编码。   现在，您可以看到可以在html页面中看到php变量。

这是要添加到.html页面的AJAX代码

<html>
  <head>
    <meta charset="utf-8" />
    <title>Praktikum Webanwendungen</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                Add();
            });
            $("#b2").click(function(){
                Substract();
            });
            $("#b3").click(function(){
                Multiply();
            });
            $("#b4").click(function(){
                Divide();
            });
        });
        function Add(){    
         var no1=parseInt($("#number1").val());    
         var no2=parseInt($("#number2").val());    
         var result =no1+no2;    
          $("#ergebnis").val(result)
        }    
        function Substract(){    
         var no1=parseInt($("#number1").val());    
         var no2=parseInt($("#number2").val());    
         var result =no1-no2;    
          $("#ergebnis").val(result)    
        }    
        function Multiply(){    
         var no1=parseInt($("#number1").val());    
         var no2=parseInt($("#number2").val());    
         var result =no1*no2;    
          $("#ergebnis").val(result)    
        }    
        function Divide(){    
         var no1=parseInt($("#number1").val());    
         var no2=parseInt($("#number2").val());    
         var result =no1/no2;    
          $("#ergebnis").val(result) 
        }
    </script>
  </head>
  <body>

    <h1>Taschenrechner</h1>
    <label for="num1">Zahl1: </label>
    <input id="number1" name="num1" type="number" />

    <label for="num2">Zahl2: </label>
    <input id="number2" name="num2" type="number" />

    <div>
      <button id="b1">+</button>
      <button id="b2">-</button>
      <button id="b3">x</button>
      <button id="b4">/</button>
    </div>

    <label for="res">Ergebnis: </label>
    <input id="ergebnis" name="res" type="number" value = "" >
  </body>
</html>

这是要添加到您的.php文件中的php代码

<script type="text/javascript">
  $.ajax({
            url: 'index.php',
            method: 'POST',
            data: {},
            success : function(data) {  

            userListHtml = JSON.parse(data);
            });  

             alert(userListHtml)

        });

</script>

将变量从PHP传递给HTML

4 个答案: