Ajax 页面在刷新页面按钮单击时不返回任何内容答案

【问题标题】：Ajax page return nothing on refresh the page button clickAjax 页面在刷新页面按钮单击时不返回任何内容
【发布时间】：2016-08-12 00:39:53
【问题描述】：

我创建了一个从 /pages 文件夹调用 php 页面的 ajax 函数，并在 ajax-container div 中调用我的页面，但是当我单击 refresh the page 按钮时，历史推送状态正在工作，因为我在地址，但它只加载我的 index.php 的内容，但我的ajax-container 没有任何反应。那么当我刷新页面时如何获取我调用的页面呢？

htacces：

Options +FollowSymLinks

RewriteEngine On

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

ajax 容器：

<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);
});

【问题讨论】：

好吧，除了只熟悉纯 javascript ajax 之外，我对您要做什么感到很困惑。然而，“loadPage”看起来你想去一个新的页面，对吧？ ... AJAX 并不是要转到新页面，它会在不重新加载页面的情况下引入内容。
是的，我想在我的 index.php 上做这件事想要当我点击这个链接时，AJAX 用这个新页面替换 'about.php'

标签： javascript php jquery ajax .htaccess

【解决方案1】：

我明白了，我不懂 jquery，因为我只使用过纯 javascript AJAX。不过，我确实知道要检查一些事情。

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-如果还是有问题，打开浏览器开发者工具->网络标签->php文件名

这将允许您查看 php 文件所说的任何内容（var_dumps、回声、错误，如果错误报告允许的话）

【讨论】：