Ajax页面在刷新页面按钮时没有返回任何内容

I made an ajax function calling php pages from a /pages folder and i call my pages in a ajax-container div, but when i click on the refresh the page button the history pushstate is working because i see the page in the adress, but it's loading only the content of my index.php but nothing happens in my ajax-container. So how can i get the page i called when i refresh the page?

我做了一个ajax函数从/ pages文件夹调用php页面,我在ajax-container div中调用我的页面,但是当我点击刷新页面按钮时,历史pushstate正在工作,因为我在地址中看到了页面,但是它只加载我的index.php的内容,但在我的ajax容器中没有任何反应。那么当我刷新页面时,如何获取我调用的页面?

htacces:

Options +FollowSymLinks

RewriteEngine On

RewriteBase /
RewriteRule ^([a-zA-Z0-9\-]*).php$ index.php?p=$1 [L]

ajax-container:

<div id="ajax-container">
<?php
$d = "pages/";
if (isset($_GET['p'])) {
    $p = strtolower($_GET['p']);
    if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".php")) {
        include $d . $p . ".php";
    } else {
        include $d . "404.html";
    }
} else {
    include $d . "home.php";
}
?>
</div>

and my ajax function:

和我的ajax功能:

var afficher = function(data, page) {

    $('#ajax-container').delay(200).fadeOut(250, function() {
        $('#ajax-container').empty();
        $('#ajax-container').append(data);
        $('#ajax-container').fadeIn(100, function() {});

    });
};

var lastRequest = null;
if (lastRequest !== null) {
    lastRequest.abort();
}

var loadPage = function(page, storeHistory) {
    if (typeof storeHistory === 'undefined') {
        storeHistory = true;
    }


    lastRequest = $.ajax({
        url: "pages/" + page,
        cache: false,
        success: function(html) {
            afficher(html, page);
            if (storeHistory === true) {
                history.pushState({
                    'key': 'value',
                    'url': page
                }, '', page);
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            afficher('erreur lors du chagement de la page');
        }
    });

    return false;
};

window.addEventListener('load', function() {
    setTimeout(function() {
        window.addEventListener('popstate', function(e) {
            if (e.state === null) {
                loadPage('home.php');
            } else {
                loadPage(e['state']['url'], false);
            }
        });
    }, 0);
});

1 个解决方案

#1

I see, well I don't understand jquery since I've only worked with pure javascript AJAX. However, I do know some things to check.

我明白了,因为我只使用纯JavaScript的AJAX,所以我不理解jquery。但是,我确实知道要检查的一些事情。

1-Is your php echoing things out? Even if you get a php file by AJAX, it won't display anything unless the information is being echoed out.

1 - 你的PHP回应了什么吗?即使您通过AJAX获取php文件,除非信息被回显,否则它不会显示任何内容。

2-I don't see a innerHTML, as with my experience (again only used pure javascript AJAX), the echoed php code would be put in the div's innerHTML. Example with your div: before ajax:

2 - 我没有看到innerHTML,因为根据我的经验(再次只使用纯javascript AJAX),回显的php代码将放在div的innerHTML中。你的div的例子:在ajax之前:

<div id="ajax-container">
    hello
</div>

AJAX gets php file:

AJAX获取php文件:

AJAX finishes and the content is ready... ( xmlhttp=XMLHttpRequest() )

AJAX完成并且内容已准备就绪......(xmlhttp = XMLHttpRequest())

document.getElementById("ajax-container").innerHTML=xmlhttp.responseText;//responseText= whatever php echoed out

after AJAX:

<div id="ajax-container">
   hi
</div>

This replaces the div's content, the following would add to it:

这将替换div的内容,以下内容将添加到它:

document.getElementById("ajax-container").innerHTML.=xmlhttp.responseText;
                         note the period for concat^

3- if you still having problems, open up your browser developer tools->network tab->php file name

3-如果仍有问题,请打开浏览器开发人员工具 - >网络选项卡 - > php文件名

This will allow you to see whatever the php file is saying (var_dumps, echos, errors if error reporting stuff allows it)

这将允许您查看php文件所说的内容(var_dumps,echos,如果错误报告内容允许则返回错误)

#1