在不刷新主页的情况下加载 div 中的内容

Question

您好，我想在一个主页 (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>

Answer 1

你可以通过三个 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);
        }
    });
});