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

时间:2013-05-31 04:55:00

标签: php javascript

我正在使用以下代码,无需加载页面即可加载内容!

的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大师,我需要你的帮助...

2 个答案:

答案 0 :(得分:1)

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

您可以在客户端站点上使用标签加载的主题标签执行此操作,并使用该数据重建页面,或者:
使用pushState API来操纵地址栏中显示的网址。然后,您需要在重新加载后从服务器返回正确的数据。

答案 1 :(得分:0)

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

在新加载的页面中,您不会显示某个类别 - 只有在页面加载完成后才能触发此操作。

常见的工作方法是将所选类别存储在cookie中,在页面初始化后自动触发类别加载。