Question

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

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>

和我的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);
});

Answer 1

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

1 - 你的php回应了什么吗？即使你通过AJAX获得一个php文件，它也不会显示任何内容，除非信息被回显。

2 - 我没有看到innerHTML，正如我的经验（再次只使用纯javascript AJAX），回显的php代码将被放入div的innerHTML中。你的div的例子：在ajax之前：

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

AJAX获取php文件：

AJAX完成并且内容已准备好......（xmlhttp = XMLHttpRequest（））

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

在AJAX之后：

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

这取代了div的内容，以下内容将添加到其中：

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

3-如果您仍有问题，请打开浏览器开发者工具 - >网络标签 - ＆gt; php文件名

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

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

1 个答案: