加载内容而不重新加载页面

我正在使用下面的代码，用于加载内容而不加载页面！加载内容而不重新加载页面

的index.html

<html> 

    <head> 
     <script type="text/javascript"> 
      // <![CDATA[ 
      document.observe('dom:loaded', function() { 
        var newsCat = document.getElementsByClassName('newsCat'); 
        for(var i = 0; i < newsCat.length; i++) { 
         $(newsCat[i].id).onclick = function() { 
          getCatPage(this.id); 
         } 
        } 
       }); 

      function getCatPage(id) { 
       var url = 'load-content.php'; 
       var rand = Math.random(9999); 
       var pars = 'id=' + id + '&rand=' + rand; 
       var myAjax = new Ajax.Request(url, { 
         method: 'get', 
         parameters: pars, 
         onLoading: showLoad, 
         onComplete: showResponse 
        }); 
      } 

      function showLoad() { 
       $('newsContent').style.display = 'none'; 
       $('newsLoading').style.display = 'block'; 
      } 

      function showResponse(originalRequest) { 
       var newData = originalRequest.responseText; 
       $('newsLoading').style.display = 'none'; 
       $('newsContent').style.display = 'block'; 
       $('newsContent').innerHTML = newData; 
      } 
      // ]]> 
     </script> 
    </head> 

    <body> 
     <div class="newsCat" id="newsCat1">Politics</div> 
     <div class="newsCat" id="newsCat2">Sports</div> 
     <div class="newsCat" id="newsCat3">Lifestyle</div> 
     <div id="newsLoading">Loading 
      <img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" /> 
     </div> 
     <div id="newsContent"></div> 
     </div> 
    </body> 

</html>

这页是包括在index.php所需页面！

内容load.php

<?php 

function stringForJavascript($in_string) { 
$str = preg_replace("# [\r\n] #", " \\n\\\n", $in_string); 
$str = preg_replace('#"#', '\\"', $str); 
return $str; 

$user = $_SESSION['userName']; 

} 
switch($_GET['id']) { 
    case 'newsCat1': 
    $content = include("politics.php"); 
    break; 
case 'newsCat2': 
    $content = include("sports.php"); 
    break; 
case 'newsCat3': 
    $content = include("lifestyle.php"); 
    break; 
default: 
    $content = 'There was an error.'; 

} 
print stringForJavascript($content); 
usleep(600000); 
?>

问题面临的

它工作正常，但是当我刷新页面或提交表单，代码刷新，我指的是网页其中包括前清爽，不存在......

我真的很抱歉我的英语，我知道它太可怕了！ :)

请帮助我的PHP的主人，我需要UR帮助...

来源

2013-05-31 PHP kid

这是设计的行为。重新加载按钮将真的重新加载页面 - 这包括重置页面状态。

在新加载的页面中，不显示类别 - 仅在用户交互后页面加载完成后触发。

一个常见的工作是将选定的类别存储在cookie中，在页面初始化后自动触发类别加载。

来源

2013-05-31 05:00:01

一个cookie，嗯thanx的建议... :) –

yipppii .... thanx fr你的建议@Eugen Rieck，它的工作！ :) –

解决这个问题有两种方法。

你可以做客户端的网站与包括hashtag对什么是curriently承载和该数据或重建页面：
使用pushState API操纵在地址栏中所显示的URL。然后，您需要在重新加载后从服务器返回正确的数据。

来源

2013-05-31 05:00:42 rekire

我是这个Ajax中的新东西，所以你可以给我一个例子，或者可以更清楚地了解thye hashtag＃，这样我就可以理解，该怎么做！ –

我在上面的答案中链接了有关API的文档。然而这个网页：http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/似乎也有帮助。 – rekire

加载内容而不重新加载页面

回答

相关问题