我的网站上有一个表格(http://hokuco.com/test/)。它用php创建了一个文件夹,但自从我安装了javascript后,我的php就无法工作了。javascript重定向到php创建的文件夹。具有讽刺意味的是,在我让javascript工作之前,php是工作的。
关注两个屏障之间的区域,如下所示:
<!--===========-->
index.php:
<?php
function recurse_copy($src,$dst) {
$dir = opendir($src);
@mkdir($dst);
while(false !== ( $file = readdir($dir)) ) {
if (( $file != '.' ) && ( $file != '..' )) {
if ( is_dir($src . '/' . $file) ) {
recurse_copy($src . '/' . $file,$dst . '/' . $file);
}
else {
copy($src . '/' . $file,$dst . '/' . $file);
}
}
}
closedir($dir);
}
$src = "./xe7";
$dst = $_POST['foldername'];
recurse_copy($src,$dst);
?>
<link rel="stylesheet" type="text/css" href="style.css" />
<div>
<body onload="timer=setTimeout('removeControls();',3)">
<h1>Drawblog</h1>
<div class="FAQ" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
<a href="#hide1" class="hide" id="hide1">Controls</a>
<a href="#show1" class="show" id="show1">-</a>
<div class="list" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
<!--===========-->
<form method="post" id ="form" action ="index.php">
<input type="text" name="foldername" id ="togl">
<input type="submit" name="submit" value="Create panorama">
<script type="text/javascript">
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var folder = document.getElementById("togl").value;
window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
return false;
}
}
</script>
</form>
<!--===========-->
<h3>Or,</h3>
<h2>Login with an access code(the account you just typed into the box above, or a code someone shared with you)</h2>
<input type="text" id="field" />
<button id="submit">Go</button>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
document.getElementById("submit").addEventListener("click", function(){
var folder = document.getElementById("field").value;
var url = "http://hokuco.com/test/" + folder + "/index.html";
window.location.href = url;
});
</script>
</div>
</div>
<h1> </h1>
<h1> </h1>
<p>make shocking panoramas in minutes, no account needed</p>
<br/>
<br/>
<br/>
<br/>
<p>special thanks to:</p>
<div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - panorama.</div>
<h5>a hokuco company</h5>
</div>
按下提交按钮时,您正在重定向用户。这种情况不会提交表单。
如果你想提交表单,等待它的工作完成,然后将用户重定向到新位置,你可以使用AJAX提交表单,并在完成后使用回调重定向用户。请参阅:使用ajax 提交表单
或者,您可以在提交到的页面表单中使用php重定向,并将用户发送到那里。由于此页面既是表单又是提交目标,您可以使用以下内容:
if (isset($_POST['foldername'])) {
$dst = $_POST['foldername'];
recurse_copy($src, $dst);
$destURL = "http://hokuco.com/test/".$dst."/toggle.php";
header('Location: '.$destURL);
die('redirecting, please wait. Alternatively use this url: '.$destURL);
}
这是非常初级和危险的,因为您没有清理文件夹名称的用户输入(请参阅:文件夹的正则表达式),但它可能有助于您理解这个概念,以便进入下一步。
<form method="post" id ="form" action ="index.php">
<input type="text" name="foldername" id ="togl">
<input type="submit" name="submit" value="Create panorama">
</form>
好吧。在添加JS代码之前,您的表单通常在用户按下提交按钮时提交给index.php
。
但是,现在您已经为该表单的onsubmit
事件添加了一个处理程序
<script type="text/javascript">
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var folder = document.getElementById("togl").value;
window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
return false;
}
}
</script>
请注意,处理程序返回false
,从而抑制表单提交的默认行为。实际上,它需要返回false
才能执行重定向。
然而,现在您已经引入了自己的onsubmit
处理程序,您需要提供自己的自定义JavaScript代码来提交表单
<script type="text/javascript">
window.onload = function () {
document.getElementById("form").onsubmit = function () {
// Submit form to index.php
$.post('index.php', $('#form').serialize(), function() {
// Perform redirection, once submission succeeds
var folder = document.getElementById("togl").value;
window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
});
return false;
}
}
</script>
您可能还想考虑完全删除JS处理程序,转而在PHP中实现重定向逻辑。