2

您好，我想在一个主页（index.html）中运行 3 个页面，类似于“应用程序样式”

页面是： 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>

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>
4

1 回答 1

3

您可以通过将三个 div 设置为 '#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);
        }
    });
});
于 2013-04-01T10:46:50.420 回答