Question

您好我有3页我想在一个主页（index.html）中运行“app style”

页面为：form.html，表单results.php和link.html页面

我希望它像这个演示一样加载：删除（网站关闭）但不使用embed或iframe。

提交form.html上的表单后，会转到results.php页面并且该页面假装加载，然后在5秒左右后转到link.html页面我想要这一切都在没有重新加载index.html

的情况下发生

我看过动态页面＆amp;试图使用jQuery隐藏/显示内容但我似乎无法使用计时器和表格提交任何东西让我难以接受。

任何帮助都是令人难以置信的赞赏我已经搞砸了一段时间了，我只知道html和css，并且只玩过JavaScript和php。

我很高兴看到使用下面脚本的表单和计时器的一些工作代码。但即使指向正确的方向也许会有所帮助。谢谢＆amp;抱歉，如果这个问题不适合本网站。

我的代码：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>

Answer 1

您可以通过将三个带有说明ID的div作为“＃home-page”，“＃result-page”和“link-page”来实现此目的。保留最后两页。然后在表单提交上进行ajax调用，并显示对＃results-page div的响应并隐藏表单。几秒钟后，显示＃link-page并隐藏＃results-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中加载内容而不刷新主页

1 个答案:

HTML

JS