您好，我有3个页面，我想在一个主页（index.html）内运行“应用程序样式”
这些页面是：form.html，results.php形式和link.html页面
我希望它像这样的演示加载：删除（站点向下），但不使用embed或iframe。
提交form.html上的表单后，它会转到results.php页面，并假装该页面，然后在5秒钟左右后转到link.html页面，我希望这一切都发生而无需重新加载index.html
我看过动态页面并尝试使用jQuery隐藏/显示内容
但是我似乎无法与计时器配合使用，并且表单提交使我很难办到。
任何帮助都将令人难以置信地赞赏，我已经对此进行了一段时间的摸索，我只真正了解html和css，并且只使用过JavaScript和php。
我很高兴看到使用下面脚本的带有表单和计时器的一些有效代码。但即使指向正确的方向也会有所帮助。感谢和抱歉，如果这个问题不适合这个网站。
我的代码：index.html
<html>
<head>
<title>index main page</title>
<style>
/** http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
body{
background-image:url(http://i.imgur.com/z69OCGn.png);
background-repeat:repeat;
height:100%;
width:100%;
position:fixed;
}
#wrap{
background-image:url(http://i.imgur.com/Xuyys5X.png);
background-repeat:repeat;
width:800px;
height:100%;
}
#header{
width:600px;
height:100px;
}
#load{
background-color:#fff;
margin-top:100px;
width:600px;
height:300px;
}
.centre{
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrap" class="centre">
<div id="header">
</br></br></br></br>
<p align="center" style="color:#fff;"> The Page doesn't refresh or reload </p>
</div>
<div id="load" style="" class="centre">
<embed src="form.html" width="600px" height="300px" style="border:1px solid">
</div>
</div>
</body>
</html>
form.html
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div id="div3">
<div id="form">
<form action="results.php" method="post" >
<input id="field" name="field" required>
<input id="submit" name="submit" type="submit" value="submit">
</form>
</div>
</div>
</body>
</html>
result.php
<html>
<head>
<title>Page 2</title>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)>=100) {
location.href = 'link.html';
clearInterval(t);
exit;
}
i.innerHTML = parseInt(i.innerHTML)+1;
}
var t = setInterval(function(){ countdown(); },100);
</script>
</head>
<body>
<div id="div1">
<p>this will be displayed on the results page. its not, just for reference. </p>
<p>Submit: </p>
<font color="#33CC00"><?php echo $_POST["field"]; ?> </font>
<div style="margin-left:55px; margin-top:20px;">
<p>Page change in: <font color="#33CC00"><span id="counter"> 10</span></font></p>
</div>
<img src="http://i.imgur.com/LLzENHe.gif">
</div>
</body>
</html>
link.html
<html>
<head>
<title>Page 3</title>
</head>
<body>
<div id="div3">
<p>this is a link <a href="#">Link</a></p>
</div>
</body>
</html>
参考方案
您可以通过使用说ID为“＃home-page”，“＃result-page”和“ link-page”的三个div来实现此目的。隐藏最后两页。然后在表单提交上进行ajax调用，并显示对＃result-page div的响应并隐藏表单。几秒钟后，您将显示＃link-page并隐藏＃result-page。
这是给您的jsfiddle。我希望这就是你想要的。
的HTML
<form method="post" action="results.php">
<h2>Form Page</h2>
Your form elements here
</form>
<div id="result-page" style="display:none">
<h2>Result Page:</h2>
Result of the ajax call here
</div>
<div id="link-page" style="display: none;">
<h2>Link page:</h2>
Link page content here
</div>
在页面加载时，为表单提交附加事件，在其中您进行ajax调用并将响应附加到结果页面div中
JS
$("form[ajax=true]").submit(function (e) {
$.ajax({
url: 'results.php',
type: 'POST',
success: function (data) {
$("#result-page").append(data).show(); // appending data response to result-page div
$('form').hide(); //hiding form
setTimeout(function () {
$("#result-page").hide();
$("#link-page").show();
}, 5000);
}
});
});
有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同？我只希望下面的div提交值，单选按钮很丑代码输出如下：<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…
PHP-复选框组 - php我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…
故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…
php Singleton类实例将在多个会话中保留吗？ - php举一个简单的例子，如果我想计算一个不使用磁盘存储的脚本的命中次数，我可以使用静态类成员来执行此操作吗？用户1：<?php $test = Example::singleton(); $test->visits++; ?> 用户2：<?php $test = Example::singleton(); $test->visits+…
使用PHP包含时的淡入淡出过渡 - php我正在尝试使用jQuery或CSS（或其他方式！）在DIV中包含的php页面上创建淡入淡出或滑动过渡。我四处搜寻，发现了很多淡入淡出过渡的示例，这些实例彼此淡入淡出div或隐藏内容淡入淡出，但是这种情况略有不同。我有一个DIV，其内容由导航栏控制。选中后，每个页面都可以使用PHP成功地包含在div中，但我想使内容淡入和淡出。关于如何在页面更改之间进行漂亮过渡…