Fatal编程技术网
  • php/
  • Php 加载div中的内容而不刷新主页

Php 加载div中的内容而不刷新主页

php jquery iframe dynamic

Php 加载div中的内容而不刷新主页,php,jquery,iframe,dynamic,embed,Php,Jquery,Iframe,Dynamic,Embed,您好，我有3个页面，我想在一个主页（index.html）中运行，类似于“应用程序样式” 页面包括：form.html、表单results.php和link.html页面 我希望它像这个演示加载：删除（网站关闭），但不使用嵌入或iframe 一旦提交了form.html上的表单，它就会进入results.php页面，该页面假装加载，然后大约5秒钟后它就会进入link.html页面，我希望这一切都不会重新加载index.html <html> <head>

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

页面包括：
form.html
、表单
results.php
和
link.html
页面

我希望它像这个演示加载：删除（网站关闭），但不使用嵌入或iframe

一旦提交了
form.html
上的表单，它就会进入
results.php
页面，该页面假装加载，然后大约5秒钟后它就会进入
link.html
页面，我希望这一切都不会重新加载
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>

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

<html>
   <head>
      <title>Page 3</title>
   </head>
   <body>
      <div id="div3">
         <p>this is a link <a href="#">Link</a></p>
      </div>
   </body>
</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>

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

<html>
   <head>
      <title>Page 3</title>
   </head>
   <body>
      <div id="div3">
         <p>this is a link <a href="#">Link</a></p>
      </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>
您可以通过使用三个div来实现这一点，比如id为“#主页”、“结果页”和“链接页”。隐藏最后两页。然后在表单提交时进行ajax调用，显示对#result page div的响应并隐藏表单。几秒钟后，显示#链接页面并隐藏#结果页面

这是给你的礼物。我希望这就是你想要的。

HTML
这正是我想要的，非常感谢你花时间为我做这件事，我真的很感激！尤其是JSFIDLE演示版！再次感谢！希望您今天过得愉快：）我在尝试将脚本从JSFIDLE“本地化”时遇到了一些麻烦？有什么想法吗？您需要将属性action=“/echo/html/”更改为表单提交的文件名为yes，但它似乎加载了该文件/页面？它不能自己提交吗？这是否与link div not load有关，或者这是另一个问题？我不知道我是否理解正确。你是说提交后，它不会停留在同一页上吗？你也可以更新链接，你给了适当的行动，你将使用，以便我可以看到这个问题。