您好，我有 3 个页面，我想在一个主页 (index.html) 中运行某种“应用程序样式”
这些页面是:form.html、表单results.php和link.html页面
我希望它像这样的演示一样加载:已删除(站点已关闭)但不使用嵌入或 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>
结果.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>
最佳答案
您可以通过三个 div 来实现此目的，其中 id 分别为“#home-page”、“#result-page”和“link-page”。将最后两页隐藏起来。然后在表单提交上进行 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);
}
});
});
关于php - 在 div 中加载内容而不刷新主页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15739313/