Question

对于我的学校项目，我正在创建一个提供票务预订服务的样机电影院网站。目前，我正在尝试创建座位选择部分。

我已经成功地做到了这一点，并且代码如何检测是否已选择座位是一个布尔值。（例如，如果他们选择了座位A1，则名为“ A1”的变量将设置为true），现在剩下的唯一部分就是将用户选择的选择详细信息转移到弹出式网页中，在其中填写其“付款”详细信息。如何将变量值准确地传输到子网页？需要一个php文件吗？我是php的菜鸟，因此对您的一些指导表示赞赏。

我已经在网上搜索了一段时间（包括堆栈溢出），但是找不到适合我情况的正确代码

<html>
<body>
The on/off button:
<button onclick="press_button"><img id="button" src="on.png" style="width:100px"></button>

<BR>
The button that opens a new webpage:
<button onclick="confirm()"> Confirm</button>


<script language="JavaScript">
var i=0, status;
function press_button(){
i++;
if(i%2 == 1){
document.getElementById('button').src='off.png';
status=true
}
else
document.getElementById('button').src='on.png';
status=false
}
//function that changes the look of the button when it is on/off and records down whether it is on/off
function confirm(){
window.open("confirm.html")
//opens a new webpage
</script>


</body>
</html>

为简单起见，我制作了一个具有打开/关闭按钮的简单网页，并且我希望有一个确认按钮，该按钮可以打开新页面并根据打开/关闭状态显示文本消息。关闭按钮。谁能教我该怎么做？

Answer 1

您可以单独使用JS进行此操作，但是还有许多其他方法。

<body>
  <input type='text' value='defaultParamValue'>
  <button type='button'>send param</button>
  <script type='text/javascript'>
    document.querySelector('button').onclick
    = () => window.location.href
    = 'destination.html?nameOfParam='
    + encodeURIComponent(document.querySelector('[type=text]').value)
  </script>
</body>

您可以使用PHP来做到这一点，这更加现实和实用。

<body>
  <form action='destination.php' method='get'>
    <input name='param' type='text' value='defaultParamValue>
    <input type='submit'>
  </form>
</body>

这就是使用destination.php上的PHP检索值的方式。

$_POST['param'];

以下是您自己的示例的实现方法。

<body>
  The on/off button:
  <!-- you need to include type='button', otherwise it acts as type='submit' -->
  <button type='button' onclick='press_button()'>
    <img id='button' src='on.png' style='width:100px'>
  </button>
  <BR>
  The button that opens a new webpage:
  <!-- you need to include type='button', otherwise it acts as type='submit' -->
  <button type='button' onclick='confirm()'> Confirm</button>

  <script type='text/javascript'> // the language attribute is deprecated
    var
      i=0,
      button=document.querySelector('button'),
      status
    function press_button(){
      i++
      if(i%2 == 1){
        button.src='off.png'
        status=true
      }
      else{ // you were missing a curly bracket
        button.src='on.png'
        status=false
      }
    } // you were missing a closing curly bracket
    function confirm(){
      if(status){
        // window in window.open is a global variable
        // which means it is always accessible
        // and you do not need to include it
        open(`confirm.html?status=${encodeURIComponent(status)}`)
      }
    } // you were missing a closing curly bracket
  </script>
</body>

结构化代码可以更轻松地发现代码中的问题（即缺少大括号）。

以下JS将允许您在新页面上获取URL查询字符串参数。

const
  urlParams = new URLSearchParams(location.search),
  myParam = urlParams.get('status')
console.log(urlParams) // status=true/false
console.log(myParam) // true/false

如何让子网页从父网页接收变量值？

1 个答案: