我已经开始使用pjax,因为我想为我的用户提供快速,流畅的体验,而不需要大量不必要的HTTP请求和重复呈现未更改的HTML.
我在我的网站上运行得相当好,我必须说起来并运行起来非常容易,考虑到它对体验的影响有多大.
但是,我看到很少支持pjax - 无论是在StackOverflow上还是在网络上(谷歌搜索返回的顶部结果与 Web开发完全 无关).
但是我印象深刻,即使它还没有被广泛支持,我仍然可以使用它.我主要担心的是当我已经在没有大量支持的情况下将代码投入其中时遇到大问题.所以我想确保那里没有别的东西.
有没有其他方法可以实现pjax提供的我不知道的相同功能？或者它是如此新鲜,以至于没有多少人知道它呢？或者,这只是一个糟糕/有问题的实施？
我知道这个问题已经被问了一些 时间在这里.但这些看起来已经过时了,看起来Adsense for Ajax项目已经被封装(或者至少是非常缓慢的移动).
我有一个网站,我最近将pjax集成到了 - 基本上,它使用Ajax加载主要内容区域,同时使用javascript维护浏览器历史记录和后退/前进功能.history.pushState它使世界变得异乎寻常整个网站的响应能力如何,因为它不再需要对网站的所有外壳(javascript,css,images)进行HTTP请求.
但Adsense不会与Ajax合作 - 至少不是本地的.我已经阅读了有关iFrame解决方案的内容,但听起来像iFrame和Ajax,我的pjax解决方案不能很好地协同工作.
就Adsense的用法而言,我所做的并不是狡猾的.当用户点击链接时,我仍然只是在每页导航中展示一组广告.它只是没有执行完整的页面级HTTP请求.
有什么选择吗？有没有人做过这样的事情？或者,是否有人知道Adsense for Ajax项目的任何更新？
我需要弄明白这一点.如果我不能,我可能会选择pjax而不是Adsense,这意味着我的整个商业计划必须重新进行.啊.
提前致谢.
我们的一些链接由PJAX包装.当用户单击PJAX链接时,服务器仅返回HTML的必需部分.
如果我执行以下操作:
浏览器将显示PJAX请求返回的内容.HTML将被破坏,因为它只是要显示的HTML的一部分(请查看此问题).
我们试图通过不缓存PJAX响应(Cache-Control标题)来解决这个问题.这解决了我们的问题,但提出了另一个问题:当用户按下后退按钮时,WebKit(Chrome 20.0)从服务器加载完整内容,然后触发popstate导致不必要的PJAX请求的事件.
是否可以重新创建正确的后退按钮行为？
大多数时候,我会$(document).ready在页面上放一些javascript代码来做一些初始化的事情,比如事件绑定等.
但现在我想对我的一些页面使用pjax https://github.com/defunkt/jquery-pjax.
使用pjax,因为只有页面的一部分被刷新,所以$(document).ready不会再被调用.
我可以手动触发事件的初始化脚本pjax:end,但我也想知道是否有更好的解决方案.
谢谢.
我想在不重新加载的情况下更改html.我这样做:
$('#left_menu_item').click(function(e) {
if (!!(window.history && history.pushState)) {
e.preventDefault();
history.pushState(null, null, newUrl);
}
});
它工作正常.但是,如果我想返回"返回"按钮 - 浏览器更改以前的网址,但它不会重新加载页面.为什么？
我在chrome和firefox中尝试了pjax示例,我拿了示例代码并将其放入我自己的应用程序中,但它仍然会进行整页重新加载.发生AJAX请求然后页面继续运行而不更新#main div
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://localhost:8888/jul/js/jquery.pjax.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// $('a[data-pjax]').pjax();
// })
// $(document).ready(function(){
// $('a').pjax({
// container: '#main'
// })
$('document').ready(function(){
$('ul a').pjax('#main')
});
</script>
</head>
<body>
11:59:36 <div id="main">
<div class='loader' style='display:none'><img src='http://localhost:8888/jul/imgs/spinner.gif'></div><ul>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/index/">Index</a></li>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/total_posts/">total_posts</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/index">Index</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/total_posts">total_posts</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/total_graph">total_graph</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/twitter_graph">twitter_graph</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/facebook_graph">facebook_graph</a></li>
</ul>index files
</div>
</body>
</html>
我已经尝试了多种方法来调用pjax,也许其他人可以指出我哪里出错了？Ajax/GET似乎在firebug控制台中恢复正常 - 这是我的php产生pjax响应的一个例子
public function total_posts(){
// print_r($_SERVER);
if (!isset($_SERVER["X_PJAX"])) {
$this->load->view('stats/pjax_stats/header');
$this->load->view('stats/pjax_stats/links');
}else{
echo "pjax";//add in for …目前我正在将我的ajax调用转换为常规$.pjax()调用.一切正常,但ajax成功功能.我无法管理如何使用给定参数调用pjax成功函数.
我唯一可以使用的是定义在每次pjax调用时调用的pjax全局成功函数:
$(document).on('pjax:success', function(event, data, status, xhr, options) {
});
但不幸的是,我想定义每个调用特定的成功函数.
Ajax调用示例:
$.ajax({
url:"/myPage/myFunction",
type:"POST",
data:giveMeData(),
success:function(data){$('#right_form').html(data);console.log('Success works!')}
});
Pjax调用示例:
$.pjax({
url:"/myPage/myFunction",
type:"POST",
container:'#right_form',
data:giveMeData(),
success:function(){console.log('Success works!')}
});
我正在尝试在yii2项目中使用Pjax小部件.
我的目标是更新一些内容.
我的代码:查看div #formsection
<?php Pjax::begin(); ?>
<div id="formsection"></div>
<?php foreach ($tree as $id => $name): ?>
<?php echo Html::a(
$name,
['update', 'id'=>$id],
['data-pjax'=> '#formsection']) ?>
<?php endforeach ?>
<?php Pjax::end(); ?>
更新动作
public function actionUpdate($id)
{
return $this->renderAjax('update');
}
当我单击链接时,所有pjax div内容都将被服务器的响应替换.我想要#formsection更新内容.
更多信息:这是Pjax小部件在页面中生成的js代码.
jQuery(document).ready(function () {
jQuery(document).pjax("#w0 a", "#w0", {"push":true,"replace":false,"timeout":1000,"scrollTo":false});
jQuery(document).on('submit', "#w0 form[data-pjax]", function (event) {jQuery.pjax.submit(event, '#w0', {"push":true,"replace":false,"timeout":1000,"scrollTo":false});});
});
我的代码有什么问题？
我解决了这个问题.我不得不改变观点.
<div id="categories">
<?php foreach ($tree …我一直试图让前面的浏览器按钮在一个小网站上使用pjax工作,并提出以下代码来处理类更改和淡入淡出各种叠加层.
但是我发现Chrome和Safari将初始页面加载视为popstate,因此它让我感到悲伤.反正有没有阻止这个？
$(window).on("popstate", function() {
if ($('body').hasClass('info')) {
$('body').removeClass("info").addClass("work");
$('.info_overlay').fadeOut(duration);
alert('popstate');
} else if ($('body').hasClass('work')) {
$('body').removeClass("work").addClass("info");
$('.info_overlay').fadeIn(duration);
} else {
$('body').removeClass("project").addClass("work");
$('.project_overlay').fadeOut(duration);
}
});
我有一个rails应用程序,我继续得到一个奇怪的行为与pjax请求.当我查看我的开发日志时,我可以看到正在发出两个请求.第一个请求是pjax而下一个请求不是.结果页面仍然重新加载.
如果有人能帮助我,我感激不尽.