Javascript 如何让子网页从父网页接收变量值?
对于我的学校项目,我正在创建一个模拟影院网站,提供订票服务。目前我正在尝试创建座椅选择部分 我已经成功地做到了这一点,代码如何检测是否已选择座位是一个布尔值。(例如,如果他们选择了seat A1,则名为“A1”的变量将设置为true),现在剩下的唯一部分是将用户选择的选择详细信息传输到一个弹出网页,用户在该网页中填写“付款”详细信息。如何准确地将变量值传递到子网页?是否需要一个php文件?我是php的noob,因此非常感谢您的指导 我在网上搜索这项技术已有一段时间了(包括堆栈溢出),但我找不到任何适合我的情况的代码Javascript 如何让子网页从父网页接收变量值?,javascript,php,html,Javascript,Php,Html,对于我的学校项目,我正在创建一个模拟影院网站,提供订票服务。目前我正在尝试创建座椅选择部分 我已经成功地做到了这一点,代码如何检测是否已选择座位是一个布尔值。(例如,如果他们选择了seat A1,则名为“A1”的变量将设置为true),现在剩下的唯一部分是将用户选择的选择详细信息传输到一个弹出网页,用户在该网页中填写“付款”详细信息。如何准确地将变量值传递到子网页?是否需要一个php文件?我是php的noob,因此非常感谢您的指导 我在网上搜索这项技术已有一段时间了(包括堆栈溢出),但我找不到任
<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>
打开/关闭按钮:
打开新网页的按钮:
证实
变量i=0,状态;
功能按下按钮(){
i++;
如果(i%2==1){
document.getElementById('button').src='off.png';
状态=真
}
其他的
document.getElementById('button').src='on.png';
状态=错误
}
//当按钮打开/关闭时改变按钮外观并记录其是否打开/关闭的功能
函数确认(){
window.open(“confirm.html”)
//打开一个新网页
为了简单起见,我制作了一个带有开/关按钮的简单网页,我希望有一个确认按钮,根据开/关按钮的状态打开一个新页面并显示一条文本消息。有人能教我怎么做吗?你可以单独用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>
下面是如何使用您自己的示例来实现这一点
<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>
根据我对您案例的理解,您可能需要创建一个带有select标记的表单,并将这些值发送到一个模式表单,供用户填写其付款详细信息。可以使用PHP从表单接收这些详细信息并将其发送到数据库。请注意,许多浏览器都会阻止弹出窗口。我建议使用付款表单创建一个DIV覆盖。这样,你仍然在同一个页面上,因此你可以访问所有变量。为了安全地处理表单和付款,你仍然需要php。谢谢,但我没有使用表单来接收数据。有没有办法只检索变量值?@DarrenWong JS示例没有使用表单。你甚至不需要使用
输入元素。这只是一个示例,向您展示了它是如何完成的。无论如何,修改了您自己的代码并将其添加到我的答案中。抱歉,我忙于考试。我请了一天假,现在终于可以测试了。Brb,对不起again@DarrenWong可以理解。你在学CS吗?我现在要睡觉了,但我会在明天回来看看。我现在在考试的中间,但中间有一天休息。提问很快:我能只调用子页面中的变量吗?比如IF(Stase= true){Doo.Wrrad(“on”)}
$_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>
const
urlParams = new URLSearchParams(location.search),
myParam = urlParams.get('status')
console.log(urlParams) // status=true/false
console.log(myParam) // true/false