2016-08-01 268 views
0

我做了一个ajax函数调用一个/ pages文件夹中的php页面,我打电话给我的页面在ajax-container div,但是当我点击refresh the page按钮时,history pushstate正在工作,因为我在地址栏中看到了页面,但它仅加载了index.php的内容,但在我的ajax-container中没有任何反应。 那么我怎么能得到我刷新页面时调用的页面?Ajax页面刷新页面按钮没有返回点击

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

+0

嗯,我只是很熟悉纯粹的JavaScript AJAX的顶部,你想要做什么困惑。然而,“loadPage”看起来像你想要去一个新的页面? ... AJAX不打算进入一个新的页面,它带来的内容,而无需重新加载页面。 – Tyler

+0

是的,我想做什么它在我的index.php我带'about.php'在我的ajax容器,所以现在在我的'about.php'我有另一个链接,我想当我点击这个链接, AJAX用这个新页面替换'about.php' – Tiaw

回答

0

我明白了,那么我不明白jQuery的,因为我只用纯JavaScript AJAX工作。但是,我知道一些事情要检查。

1-您的PHP是否回应了事情?即使你通过AJAX获得一个php文件,它也不会显示任何东西,除非信息被回显出来。

2 - 我没有看到innerHTML,与我的经验(再次只使用纯JavaScript AJAX)一样,回显的php代码将放在div的innerHTML中。例如你的div: 阿贾克斯前:

<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的内容T,下面将添加到它:

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

3-如果你仍然有问题,打开你的浏览器开发者工具 - >网络标签 - > php文件名

这将让你看到什么该PHP文件是说(var_dumps,回声,错误,如果错误报告的东西允许它)